React官方文档中处理多个输入

当需要处理多个 input 元素时，我们可以给每个元素添加 name 属性，并让处理函数根据 event.target.name 的值选择要执行的操作

当时对处理函数（handleInputChange）的逻辑不是很理解：

class Reservation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isGoing: true,
      numberOfGuests: 2
    };

    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange(event) {
    const target = event.target;
    const value = target.name === 'isGoing' ? target.checked : target.value;
    const name = target.name;

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

  render() {
    return (
      <form>
        <label>
          参与:
          <input
            name="isGoing"
            type="checkbox"
            checked={this.state.isGoing}
            onChange={this.handleInputChange} />
        </label>
        <br />
        <label>
          来宾人数:
          <input
            name="numberOfGuests"
            type="number"
            value={this.state.numberOfGuests}
            onChange={this.handleInputChange} />
        </label>
      </form>
    );
  }
}

后自己理解的意思为：

1.通过target.name判断当前点击事件操作的是否为name=='isGoing’的input框，是（即选中type为checkbox的input框）则将checkbook的值赋给value,否（即选中type为number的input框）则将number输入框的值赋给value；

const value = target.name === ‘isGoing’ ? target.checked : target.value;

2.获取当前点击事件操作的input框的name,将state¹中与获取到的name值相同的字段设置为获取到的value值；

const name = target.name;
this.setState({
[name]: value
});
}

3.render检测到state有变化，重新渲染改变的部分。

（以上为一些个人理解，有什么不正确或不足欢迎指正补充）

---

1. state是一开始在constructor函数中定义好并初始化好的，有‘isGoing’，‘numberOfGuests’两个字段。 ↩︎