react/nodejs：从选择下拉列表中接收值以将其发送到数据库答案

【问题标题】：react/nodejs: Receiving value from a select dropdown to send it to the databasereact/nodejs：从选择下拉列表中接收值以将其发送到数据库
【发布时间】：2018-04-03 13:08:47
【问题描述】：

我的反应前端中有一个这样的选择下拉菜单

<select name="level" value={level} onChange={this.handleChange} className="form-control">
													<option>Begineer</option>
													<option>Intermediate</option>
													<option>Advanced</option>
												</select>

我在后端将这个值作为 req.body 处理。我的 handleChange 功能很简单

handleChange(event) {
  const state = this.state;
  state[event.target.name] = event.target.value;
  this.setState({
    state
  });
}

当我提交表单时，该值不会被提交。我也在我的构造函数中初始化了这个值。在这种情况下我该怎么办？

【问题讨论】：

const state = this.state; 不会创建this.state 的副本，这意味着您正在操纵this.state。无论如何，{level} 是什么？
{level} 是在后端输入为req.body 的字符串值。它应该从下拉菜单中接收适当的级别，即初级、中级或高级。
您是如何提交表单的？

标签： javascript reactjs express

【解决方案1】：

应该是

  this.setState(state)

【讨论】：

【解决方案2】：

首先你需要为你的选项添加价值

  <option value="Begineer">Begineer</option>

其次永远不要在没有设置状态的情况下直接改变状态对象像这样

  state[event.target.name] = event.target.value;

改为

 let objToUpdate = {...state};
objToUpdate[event.target.name]=  event.target.value
this.setState(objToUpdate)

这应该可以解决您的问题

【讨论】：

没有value 的option 有它的innerHTML 作为值。
而且，不用太麻烦，您可以像这样设置状态this.setState( { [ e.target.name ]: e.target.value } )