为什么对对象集状态使用 ES6 计算属性语法

Question

在 React 文档页面表单的示例中，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 的新手，正在努力理解在此示例中如何应用计算属性语法。任何帮助将不胜感激。

Answer 1

为什么对对象集状态使用 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>
    );
  }
}

Answer 2

当你用数组方括号包装一个键时，它将获得变量名作为键。

如果不这样做，键将是字符串。 所以...

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

Answer 3

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

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

Answer 4

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

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

Answer 5

也许在没有 ES6 语法的情况下编写，你会更多地了解发生了什么。

相同的代码如下(您可以在代码片段中运行它并查看它(

不过，我要说的一件事是使用let而不是const，因为使用 const 创建的变量只要它们"存在"，就会不断指向或绑定到相同的值。因此，在此处使用const可能不会让您选中和/或取消选中该框，或者让您增加/减少数量。

我希望它能帮助您了解更多。

谢谢

class Reservation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isGoing: true,
      numberOfGuests: 2
    };
    this.handleInputChange = this.handleInputChange.bind(this);
  }
  handleInputChange(event) {
  	let value;
  	
    if(event.target.type==='checkbox'){
    	 value = event.target.checked
    }
    else {
       value = event.target.value
    }
  
    this.setState({
      [event.target.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>
    );
  }
}
ReactDOM.render(
  <Reservation />,
  document.getElementById('root')
);

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>