出于什么目的，我们将e.target.name编写到状态定义语句中

Question

我对为什么我们将e.target.name在react中的状态定义语句中写入e.target.name没有明确的具体理解。谁可以解释？预先感谢。

checkboxChange(e) {
let state = {
  ...this.state,
  [e.target.name]: !this.state[e.target.name]
};
...

为什么我们写

 [e.target.name]: !this.state[e.target.name]

在状态

Answer 1

如果输入的名称是"电子邮件"或"密码"，则可以轻松设置该状态键，而无需为每个输入定义单独的函数。

对于电子邮件和密码，就像：

<input name="email" onChange={this._handleChange} />
<input name="password" onChange={this._handleChange} />

，该功能将为

_handleChange = event => {
  this.setState({
    [event.target.name]: event.target.value,
  });
}

在您的情况下，您要设置复选框值，因此适用相同的原理。

Answer 2

假设在您的州，您有类似的东西：

state = {
  privacyAccepted: false
}

现在，您可以使用简单的复选框管理该值：

<input
  type="checkbox"
  name="privacyAccepted"
  ...
/>

将事件处理程序附加到此复选框后，您可以从生成的事件中访问目标，例如：

<input
  type="checkbox"
  name="privacyAccepted"
  onChange={ this.handlePrivacy }
/>
handlePrivacy = event => {
  event.target // the checkbox element that emitted this event
}

从目标中，您可以访问Checkbox属性，例如名称，

handlePrivacy = event => {
  event.target.name // "privacyAccepted"
}

能够执行此操作，然后可以使用一个通用的onChange事件处理程序，并使用event.target.name访问state中具有与输入相同名称的属性：

<input
  type="checkbox"
  name="privacyAccepted"
  onChange={ this.handleChange }
/>
handleChange = event => {
  this.setState({
    [event.target.name]: event.target.value // ... or what you want here
  })
}

此[...]语法访问对象属性设置值称为computed property，由ES6提供。