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

Question

我有一个简单的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: '' };
}

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

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

我无法将任何用户输入到这两个文本字段中。我做错了什么？

Answer 1

您的输入字段是受控制的组件，因为您使用的是value属性。这使得输入为只读，并且它们将始终反映变量（在本例中为状态变量）保持的值。由于您将username字段设置为状态变量，因此必须显式地将state设置为onChange。

在这里阅读更多关于

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>
}

Answer 2

看起来您看到了控制台关于受控字段需要onChange处理程序的警告，并添加了一个处理程序来关闭警告：）

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

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)
}