javascript - 为什么我们需要将 e.target.name 放在方括号 [] 中？

Question

这个问题已经有答案了:

Understanding computed properties (square brackets) (3 个回答)

What do square brackets around a property name in an object literal mean? (2 个回答)

已关闭 5 年前。

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

这是我的代码:

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>

Answer 1

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

相关to this .

而不是这个:

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