为什么我们需要将e.target.name放在方括号[]中? [英] Why we need to put e.target.name in square brackets []?

问题描述

为什么在使用表单元素时必须将e.target.name放在方括号中?

Why when I use form elements I got to put e.target.name in brackets?

这是我的代码:

onChange (e) {
   this.setState({ *[e.target.name]* : e.target.value});
}

(...) 
  <div>
     <label htmlFor=""> Title : </label>
     <input type="text" name="title"  onChange={this.onChange} value={this.state.title} />
  </div>
</form>

推荐答案

这是为了动态更新对象属性(当属性的名称预先未知但运行时时).这样，您可以使多个React输入具有不同的 name 属性，并使用相同的 onChange 处理程序来更新部分状态.

This is to dynamically update object property (when the name of the property is unknown upfront but runtime). This way you could have multiple React inputs having a different name property and using the same onChange handler to update part of the state.

与此相关的.

代替此:

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

我们只能编写一个像您介绍的处理程序:

We can write just one handler like you presented:

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

这篇关于为什么我们需要将e.target.name放在方括号[]中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！