这是为了动态更新对象属性(当属性的名称在运行时未知时)。通过这种方式,您可以拥有多个具有不同name
属性的React 输入,并使用相同的onChange
处理程序来更新部分状态。
与此有关。
取而代之的是:
<input type="text" name="title" onChange={this.onTitleChange} value={this.state.title} />
<input type="text" name="address" onChange={this.onDescriptionChange} value={this.state.address} />
<input type="text" name="description" onChange={this.onAddressChange} value={this.state.description} />
onTitleChange (e) {
this.setState({ title : e.target.value});
}
onAddressChange (e) {
this.setState({ address : e.target.value});
}
onDescriptionChange (e) {
this.setState({ description : e.target.value});
}
我们可以像您介绍的那样只编写一个处理程序:
<input type="text" name="title" onChange={this.onChange} value={this.state.title} />
<input type="text" name="address" onChange={this.onChange} value={this.state.address} />
<input type="text" name="description" onChange={this.onChange} value={this.state.description} />
onChange (e) {
this.setState({ [e.target.name] : e.target.value});
}