解惑React之this.setState({ [name]: value })

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

疑问

学习React中文官方文档中的非空组件与受控组件中，遇到如下代码

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.type === 'checkbox' ? 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>
    );
  }
}

在代码中可以看到

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

就心里存疑，[ ]在这里代表什么呢？代码中渲染的有两个input，赋值操作只需要一个[ ] 里加入input标签中的name属性，怎么就改变了对应的渲染值呢

解惑

查阅后，才知道，在Javascript中，当创建对象并将该对象的键包装在数组括号[]中时，您可以动态设置该键。
什么意思呢？？？就拿上面代码来说，原始代码运行界面如下

参与是否被选中由isGoing值决定，而点击第一个input标签后，
this.setState({ [name]: value });
右键“检查”后，发现 const name = target.name;相当于获取到了组件的name值，而组件的name值刚好与决定组件渲染的值是同一名字。因此，上面代码相当于

this.setState({
   isGoing: value
});

等同于ES5:

var partialState = {};
partialState[name] = value;
this.setState(partialState);

由于在实际应用中，当我们用React写一个表单组件时，表单组件中含有多个受控组件，每个受控组件绑定一个handleChange函数的话，会造成代码冗余，所以这个时候运用JS动态分配对象key的方式可以轻松解决这类问题。