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

Question

在 React 文档页面Forms的示例中，ES6 计算属性语法用于设置name属性状态的方法中。

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

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

根据我对计算属性如何工作的阅读，似乎使用它的原因是target.name可以改变的——是这样吗？如果是这种情况，似乎在那里更改它setState而不是更改name变量的值会更容易。

我是 React 的新手，正在努力理解如何在这个示例中应用计算属性语法。任何帮助将不胜感激。

标签： javascriptreactjsecmascript-6

Answer 1

为什么对对象 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>
    );
  }
}