学习记录448@react中用到的 [name]: value 是什么

在程序中看到 [name]: value 着实没有看懂，后经过学习，发现是ES6的计算属性名的应用；
其实从官网中就可以学习到这个东西，在官网中介绍非受控组件的多个输入框时，例子如下：

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

这之前你需要了解非受控组件和受控组件，见我的上一篇文章；
那么什么计算属性呢？见如下链接，简单说就是[name] 返回是name代表的值，而不是name本身，也就是对name进行了计算，于是乎，代码中用到的 [name]: value，就是设置了不同输入框的name：value，比如isGoing：value；numberOfGuests：value，将这两者作为了state保存了起来而已；后面使用的时候，直接用状态调用即可。

https://blog.csdn.net/zhenyu5665/article/details/103258471