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

Question

我是新手。我创建了一个由输入字段、按钮和下拉菜单组成的表单。它是一个功能组件。我需要通过具有其他表单值的 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>
)

Answer 1

您需要将 value 和 onChange 属性附加到 Select，就像您对其他输入所做的那样。此外，您还需要在发布时将 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)
}

并为您的 select

添加 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);
    });
}

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

How to pass dropdown values into mongodb in react?

javascript

node.js

reactjs

mern

react-hooks