为什么我的 React Js 表单不接受用户输入？答案

【问题标题】：Why doesn't my React Js form accept user input?为什么我的 React Js 表单不接受用户输入？
【发布时间】：2015-11-22 04:12:20
【问题描述】：

我有一个简单的AddUser 组件，在render 函数中我返回以下html：

  <form ref="form" className="users-form" onSubmit={ this.handleAddNew }>
    <input ref="username" type="text" name="username" placeholder="username"
        value={this.state.username} onChange={function() {}} /><br />
    <input ref="email" type="email" name="email" placeholder="email"
        value={this.state.email} onChange={function() {}} /><br />
    <button type="submit"> Add User </button>
  </form>

我将username 和email 的状态绑定到this.state，我在getInitialState 中设置为空白，如下所示：

getInitialState() {
   return { username: '', email: '' };
}

我将状态绑定到表单，因此我可以在表单提交后将其设置为空白。

此设置的问题在于表单现在呈现为只读。

我无法在任一文本字段中获取任何用户输入。我做错了什么？

【问题讨论】：

标签： forms reactjs

【解决方案1】：

您的输入字段是受控组件，因为您使用的是 value 属性。这使得输入只读，它们将始终反映值，变量（在这种情况下，状态变量）保持不变。您必须明确 setState onChange 因为您将用户名字段设置为状态变量。

阅读更多信息here

onUserNameChange : function(e){
    this.setState({username : e.target.value})
 },
 render: function(){
   return  ...
<input ref="username" type="text" name="username" placeholder="username"
    value={this.state.username} onChange={this.onUserNameChange} /><br />
...
<button type="submit"> Add User </button>
</form>
 }

更好的方法是：

onChange : function(field,e){
  this.setState({field: e.target.value});
}, 
render : function(){

return    <form ref="form" className="users-form" onSubmit={ this.handleAddNew }>
<input ref="username" type="text" name="username" placeholder="username"
    value={this.state.username} onChange={this.onChange.bind(this,"username")}  /><br />
<input ref="email" type="email" name="email" placeholder="email"
    value={this.state.email} onChange={this.onChange.bind(this,"email")} /><br />
<button type="submit"> Add User </button>
</form>

}

【讨论】：

【解决方案2】：

您似乎看到了有关受控字段需要onChange 处理程序的控制台警告，并添加了一个只是为了关闭警告:)

如果您将空的 onChange 处理函数替换为 onChange={this.handleChange} 并将此方法添加到您的组件中，它应该可以工作：

handleChange(e) {
  this.setState({[e.target.name]: e.target.value})
}

（或者对于不使用 ES6 转译器的人来说：）

handleChange: function(e) {
  var stateChange = {}
  stateChange[e.target.name] = e.target.value
  this.setState(stateChange)
}

但是，如果您的组件是扩展 React.Component 的 ES6 类（而不是使用 React.createClass()），您还需要确保该方法正确绑定到组件实例，无论是在 render()...

onChange={this.handleChange.bind(this)}

...或在constructor:

constructor(props) {
  super(props)
  // ...
  this.handleChange = this.handleChange.bind(this)
}

【讨论】：