如何解决选项标签未使用React和NodeJS在MongoDB中插入值
我正在尝试使用MERN实现插入选项值标签,但是每当我尝试在数据库中插入内容时,它什么也不会插入,因此似乎找不到问题。我刚刚开始学习MERN。无论如何,这是我编写的代码。任何帮助将不胜感激。在此先感谢:)
export default class AddClient extends Component {
constructor(props) {
super(props);
this.onChangeExisting = this.onChangeExisting.bind(this);
this.onSubmit = this.onSubmit.bind(this);
this.state = {
existing: "",};
}
onChangeExisting(e) {
this.setState({
existing: e.target.value,});
}
onSubmit(e) {
e.preventDefault();
const client = {
existing: this.state.existing,};
console.log(client);
axios
.post("http://localhost:5000/clients/create",client)
.then((res) => console.log(res.data));
}
render() {
return (
<>
<form onSubmit={this.onSubmit}>
<div className="form-group">
<label>Existing Customer: </label>
<select
ref="userInput"
required
className="form-control"
value={this.state.existing}
onChange={this.onChangeExisting}
>
<option key="Male" value="Male">
Male
</option>
<option key="Female" value="Female">
Female
</option>
</select>
</div>
<button type="submit" onClick={this.onSubmit}>submit </button>
</form>
</>
);
}
}
解决方法
You dont Have <button> Tag in side a <form> tag .
那么何时以及如何提交事件可以调用? 请添加
<button type="submit" onClick={this.onSubmit}>submit </button>
内部表单标签。
,已经解决,只需更改放置数据而不是e
onChangeExisting(e) {
this.setState({
existing: e.target.value,});
}
到
onChangeExisting(data) {
this.setState({
existing: data.value,});
}
并放入这样的变量:
const existing= [
{ key: "Not Started",label: "Not Started",value: "Not Started" },{ key: "In Progress",label: "In Progress",value: "In Progress" },{ key: "Completed",label: "Completed",value: "Completed" },];
并通过以下方式调用它:
npm i react-select
then import Select from "react-select";
在您要使用的页面上
<Select options={existing} onChange={this.onChangeExisting} />
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。