为啥我们需要将 e.target.name 放在方括号 [] 中？ [复制]

Posted 2023-02-22

【中文标题】为啥我们需要将 e.target.name 放在方括号 [] 中？ [复制]

【英文标题】：Why we need to put e.target.name in square brackets []? [duplicate]为什么我们需要将 e.target.name 放在方括号 [] 中？ [复制]

【发布时间】：2018-10-26 19:56:48

【问题描述】：

为什么当我使用表单元素时，我必须将 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>

【参考方案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);

【讨论】：

感谢 Tomasz，所以它只是关于计算属性，我认为在以下语法的情况下：onChange (e) this.setState( e.target.name : e.target.value); 因为我们调用了“e”参数，所以每个元素都会在e.target.name 自然而然。我将密切关注文档以很好地了解这里的工作原理

你需要用方括号来说明这是指动态键名

@HoCo_ 您正在使用数组语法来访问状态对象的键，而不是属性语法。