如何在反应中将下拉值传递给 mongodb？

问题描述

我刚开始反应。 我创建了一个包含输入字段、按钮和下拉菜单的表单。它是一个功能组件。我需要通过带有其他表单值的 axios 将选定的下拉项的 id 传递给后端。在创建下拉列表之前，从输入字段获取的其他值可以添加到后端。有什么方法可以使用其他表单输入值将值传递给后端？这是我的代码。

const [course,setCourse] = useState({
    name: "",code: "",passMark: "",lic: "",subjects: [],options: []
});

//const [subject,setSubject] = useState();

async function getSubjects(){
    const res = await axios.get("http://localhost:3000/subject")
    const data = res.data
    const option = data.map((item)=>({
        "value" : item._id,"label" : item.name
    }))

    setCourse({options: option})
}

/*function handleSelect(event){
    setSubject(event.target.value)
}*/

function handleClick(){
    axios.post("http://localhost:3000/course/add",course).then((res)=>{
        console.log(res);
    }).catch((err)=>{
        console.log(err);
    })
}

return (
                <Form.Group className="mb-3" >
                    <Form.Label>Subjects</Form.Label>
                    <Select options={course.options} name="subjects" isMulti  />
                </Form.Group>

                 
            </Form>
        </div>
    </div>
)

解决方法

您需要将 value 和 onChange 道具附加到 Select ，就像您对其他 Input 所做的一样。您还需要在发布时将 options 与您的课程其他内容分开。

因此为subject options创建一个新状态

const [course,setCourse] = useState({
name: "",code: "",passMark: "",lic: "",subjects: [],});

const [ options,setOptions ] = useState(null);

async function getSubjects(){
const { data } = await axios.get("http://localhost:3000/subject")
const option = data.map((item)=>({
    "value" : item._id,"label" : item.name
}))
setOptions (options)
}

并为您的选择添加 value 和 onChange 道具

<Select
  options={options}
  name="subjects"
  isMulti
  value={course.subjects}
  onChange={(selectedValues) => {
    setCourse((preValue) => {
      return {
        ...preValue,subjects: selectedValues,};
    });
  }}
/>

仅发送主题 ID

function handleClick() {
  const requestData = {
    ...course,subjects: course.subjects.map((subject) => subject._id),};
  axios
    .post("http://localhost:3000/course/add",requestData)
    .then((res) => {
      console.log(res);
    })
    .catch((err) => {
      console.log(err);
    });
}