为什么在动态设置反应状态时使用类似语法的数组

Question

以下是react

中的一项功能

要动态设置state，我们通常会

handleChange: function (e) {
    this.setState({[e.target.name]: e.target.value})
}

但如果我们手动输入名称，则不需要数组。

handleChange: function (e) {
    this.setState({name: e.target.value})
}

当e.target.name获取array like syntax时，有人可以告诉我们为什么将dynamically放在name中

Answer 1

该ES6语法，它被称为计算密钥。有关详细信息，请参阅this answer，但基本上无论e.target.name是什么，都将其设置为对象键。

handleChange: function (e) {
    this.setState({[e.target.name]: e.target.value})
}

与在ES5中执行此操作相同（更详细）：

handleChange: function (e) {
    var state = {};

    state[e.target.name] = e.target.value;

    this.setState(state);
}

Answer 2

Javascript将对象的键作为字符串进行评估。因此，[e.target.name]表示访问名称为e.target.name（强制转换为字符串）的键，而name：被解释为名称为＆＃39; name＆＃39;