在React中处理多个输入

Question

我是React的新手，正在学习如何处理表单中的多个输入。这是代码：

class Login extends Component {

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

  handleChange (evt) {
    // 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({ [evt.target.name]: evt.target.value });
  }

  render () {
    return (
      <form>

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

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

      </form>
    );
  }
}

问题是this.setState（{[evt.target.name]：evt.target.value}）如何才能实现？更换几个处理程序？[evt.target.name]是否代表两个输入？

Answer 1

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

这意味着，当email表单更改时，this.setState将会执行以下操作：

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

对于password这是相同的；

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

因此，它不一定要替换几个处理程序，而是主要替换它们并提供一种处理事件的较短方法。（想想DNRY（不要重复自己））。

但是，表单中的许多字段都this.setState({ [evt.target.name]: evt.target.value });将按照上述说明运行。

为了进一步详细说明，以您当前的形式，使用的字段email和的字段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" });
}

希望这可以帮助！

Answer 2

这是基本示例。

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

Answer 3

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

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

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