首页 > 解决方案 > 选项标签未使用 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>
      </>
    );
  }
}

标签: node.jsreactjsmongodbexpress

解决方案


You dont Have <button> Tag in side a <form> tag .

那么提交事件何时以及如何调用?请添加

<button type="submit" onClick={this.onSubmit}>submit </button>  

内部表单标签。


推荐阅读