如何解决如何在反应中将下拉值传递给 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);
});
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。