为什么对对象setState使用ES6计算属性语法? [英] Why use ES6 computed property syntax for object setState?

问题描述

在React docs页面的示例表单，ES6在方法中使用计算属性语法来设置name属性的状态.

In an example of the React docs page Forms, ES6 computed property syntax is used in a method to set the state of the name property.

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变量的值更容易.

Based on my reading of how the computed property works, it seems like the reason it's used is so target.name can be changed -- is that so? If that's the case it seems like it would just be easier to change it there in setState rather than changing the value of the name variable.

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

I'm new to React and struggling to understand how the computed property syntax is applied in this example. Any help would be greatly appreciated.

推荐答案

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

Why use ES6 computed property syntax for object setState?

计算出的属性语法使您可以动态设置对象的键.

The computed property syntax allows you to set the key of an object dynamically.

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

In the case of setState, it allows you to handle different properties of the state with a single setState, and so to reuse the same event handler function on different inputs.

所以代替:

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

这篇关于为什么对对象setState使用ES6计算属性语法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！