这个方法在 React.js 中执行什么？ [复制]答案

【问题标题】：What is this method carrying out in React.js? [duplicate]这个方法在 React.js 中执行什么？ [复制]
【发布时间】：2019-01-04 14:29:31
【问题描述】：

我正在阅读如何创建登录表单并遇到了这种方法：

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

不太清楚 setState 部分发生了什么。由于某种原因，数组括号让我失望。谁能详细说明这个方法是做什么的？

【问题讨论】：

【解决方案1】：

这是一种新的（ish）JavaScript 语法，它允许对象字面量从表达式计算属性名称。它实际上与以下内容相同：

handleChange(e) {
  var state = {};
  state[e.target.name] = e.target.value;
  this.setState(state);
}

在这种情况下，确定属性名称的表达式是e.target.name。

【讨论】：

【解决方案2】：

[someExpression] 被称为 computed property name 并且是这样写的替代方法：

handleChange(e) {
  const stateUpdate = {};
  stateUpdate[e.target.name] = e.target.value;

  this.setState(stateUpdate);
}

【讨论】：

【解决方案3】：

假设您的表单包含名为 email 和 password 的输入。您有具有相同名称“电子邮件”和“密码”的状态变量。现在你已经为输入的 onChange 事件附加了这个函数handleChange。

当调用email时，它会将state.email设置为其他字段类似的输入值。

这是一种新语法，您可以通过这种方式分配对象键。

【讨论】：