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

看起来你看到控制台有关需要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()），那么您还需要确保该方法在{{1}中正确绑定到组件实例}} ...

render()

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

constructor

Answer 2

您的输入字段是受控组件，因为您正在使用value属性。这使得输入只读，并且它们将始终反映值，变量（在这种情况下，状态变量）成立。您必须显式设置set onChange，因为您将username字段设置为状态变量。

详细了解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>

}

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

2 个答案: