为什么对对象 setState 使用 ES6 计算属性语法？

计算属性语法允许您动态设置对象的键。

在 的情况下setState，它允许您使用单个 处理状态的不同属性setState，因此可以在不同的输入上重用相同的事件处理函数。

所以而不是：

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

    this.handleIsGoingChange = this.handleIsGoingChange.bind(this);
    this.handleNumberOfGuestsChange = this.handleNumberOfGuestsChange.bind(this);
  }

  // a first handler, for isGoing
  handleIsGoingChange(event) {
    const target = event.target;
    const value = target.checked;

    this.setState({
      isGoing: value
    });
  }

  // a second handler, for numberOfGuests
  handleNumberOfGuestsChange(event) {
    const target = event.target;
    const value = target.value;

    this.setState({
      numberOfGuests: value
    });
  }

  render() {
    return (
      <form>
        <label>
          Is going:
          <input
            name="isGoing"
            type="checkbox"
            checked={this.state.isGoing}
            onChange={this.handleIsGoingChange} />
        </label>
        <br />
        <label>
          Number of guests:
          <input
            name="numberOfGuests"
            type="number"
            value={this.state.numberOfGuests}
            onChange={this.handleNumberOfGuestsChange} />
        </label>
      </form>
    );
  }
}

你可以像这样缩短它：

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

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


  // a single handler, for isGoing and numberOfGuests
  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>
          Is going:
          <input
            name="isGoing"
            type="checkbox"
            checked={this.state.isGoing}
            onChange={this.handleInputChange} />
        </label>
        <br />
        <label>
          Number of guests:
          <input
            name="numberOfGuests"
            type="number"
            value={this.state.numberOfGuests}
            onChange={this.handleInputChange} />
        </label>
      </form>
    );
  }
}

当你用数组方括号包裹一个键时，它会得到变量名作为键。

如果您不这样做，则密钥将是字符串。所以...

let name = 'id';
let obj = { //let obj = {
  [name]:1  // id: 1
};          //};

因为您不想设置“name”属性，而是设置名称存储在 name 中的属性。

  var name = "test";

  // these are all equal:
  this.setState({ [name]: 1 })
  this.setState({ ["test"]: 1 })
  this.setState({ test: 1 })

如果您不使用计算属性语法，您的函数将始终设置name属性而不是从 计算值event.target.name，这正是您想要的。您的状态将始终如下所示：

console.log(this.state);
// -> { name: 'some value' }