javascript - 在 React 中使用 es6 动态设置状态并获取状态

Question

最近我了解到可以使用动态状态处理多个输入事件。

如果有这样的状态

this.state = {
   name_1: 'john',
   name_2: 'james'
}

我可以这样得到我的状态

[1,2].forEach(obj, i), => (
  console.log(this.state[`person_${i}`]);
))

但是 setState 呢？语法是什么样的？我用过这个，效果很好。

//表示 i 是动态的

this.setState({
  [`person_${i}`]: ''
})

为什么上面的代码有效？它看起来像数组。

Answer 1

这是 ES6 中的一项新功能，名为 CompulatedPropertyName。您可以使用动态属性名称初始化对象。

您可以阅读有关此的更多信息 here .

在React生态系统中，它通常用于处理输入更改:

handleChange(field, value) {
    this.setState({ [field]: value });
}

<input
  onChange={e => this.handleChange('firstName', e.target.value)}
/>