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

通常用于创建通用/可重用函数的这种方式。

在这种情况下，括号在React中意味着什么？

3 个答案:

计算出的属性名称