javascript - 为什么在动态设置 react 状态时使用类似数组的语法

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