在 React 的这种情况下，括号是什么意思？

Question

这是 React 中的一个表单组件。我想知道括号 [ ] 在那个 onChange 事件中是什么意思？此外，我有点困惑 e.target.name 等于什么？那是一个字符串 "inputText"?

<form onSubmit={(e) => {
 e.preventDefault();
 const data = [...this.state.inputText];
 this.setState({data, inputText: ''});
}}>
<input
  type="text"
  name="inputText"
  value={this.state.inputText}
  onChange={(e) => {
    this.setState({[e.target.name]: e.target.value})
  }}
 />
</form>

如有任何意见或帮助，我们将不胜感激。

Answer 1

计算属性个名字

这是 ES6 中的新事物之一。这意味着您可以为对象动态设置 key 值。

示例：

// Computed property names (ES2015)
var prop = 'foo';
var o = {
  [prop]: 'hey',
  ['b' + 'ar']: 'there'
};

了解更多信息 here

Answer 2

这是使用字符串作为键的 es6 语法。所以，在这种情况下，这相当于：

setState({inputText: <eventValue>});

Answer 3

是的，在这种情况下 e.target.name 等于字符串 "inputText"。所以在 onChange 你也可以认为是

this.setState({["inputText"]: e.target.value})

相当于

this.setState({inputText: e.target.value})

这种方式一般用于创建generic/reusable函数。

在 React 的这种情况下，括号是什么意思？

What does the bracket mean in this situation in React?

input

setstate

reactjs

计算属性个名字