[evt.target.name]不一定代表两个输入，它仅采用事件目标的名称并使其成为setState.

这意味着当email表单发生变化时，this.setState将执行如下操作：

this.setState({ email: evt.target.value });

对于passwordthis 的工作原理相同；

this.setState({ password: evt.target.value });

所以它不一定要替换几个处理程序，它主要替换它们并提供一种更短的方法来处理事件。（想想 DNRY（不要重复自己））。

无论您在表单中有多少字段，其this.setState({ [evt.target.name]: evt.target.value });行为都将如上文所述。

进一步详细说明，在您当前的表单中，一个字段用于 theemail和一个字段用于password，将发生以下情况；

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

以上函数将获取事件的目标并提取name和value属性。因此，对于带有此更改处理程序的EACH输入，如果发生更改，它会将函数更改为以下内容email；

handleChange (evt) {
    this.setState({ email: "email@domain.com" });
}

或即对于 password

handleChange (evt) {
    this.setState({ password: "superstrongpassword" });
}

或即对于 name

handleChange (evt) {
    this.setState({ name: "John Doe" });
}

希望这可以帮助！

这是有效的，因为evt是更改事件，evt.target是更改的 DOM 元素，evt.target.name是该元素的name属性值。

这意味着当您更改<input>元素之一时，该handleChange函数将被调用，并且状态的email或password（这两个输入的名称）属性将更改为已更改元素的值。

{[variable]: value} 只是您想在对象字面量中使用字符串作为属性名称时使用的语法。

这是基本示例。

class Login extends Component {

  constructor () {
    super();
    this.state = {
      email: '',
      password: ''
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange (evt, field) {
    // check it out: we get the evt.target.name (which will be either "email" or "password")
    // and use it to target the key on our `state` object with the same name, using bracket syntax
    this.setState({ [field]: evt.target.value });
  }

  render () {
    return (
  <form>

    <label>Email</label>
    <input type="text" name="email" onChange={(event)=>this.handleChange(event, "email")} />

    <label>Password</label>
    <input type="password" name="password" onChange={(event)=>this.handleChange(event, "password")} />

  </form>
);
  }
}

每个输入都有一个 name 属性，用于在 JavaScript 中引用元素，或在提交表单后引用表单数据。在这里，您使用name和password作为名称。

this.setState({ [evt.target.name]: evt.target.value })

这是使用ES6 计算属性名称。 evt.target.name获取evt.target处理程序附加到并被调用的输入（即）的名称，并将其设置为您的状态的键。因此，本质上每次更改输入中的某些内容时，与该输入名称对应的状态也会更改。

记住一件事。您需要使初始状态名称和输入名称保持一致才能使其正常工作。

您总是可以编写单独的处理程序，但这只会使代码库复杂化并且本质上是在做同样的事情。所以它只是遵循DRY方法。还不如用这个。

希望这可以帮助！