Question

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

Answer 1

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

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

对于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

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

var a = db.A.FirstOrDefault(a => a.stampleProperty== stampleProperty);

var obj= new CustomObjectA
{
    Id = a.AId,
    sampleProperty= a.sampleProperty,
    sampleProp= a.sampleProp,
    B = a.B.Select(b => new CustomObjectB
    {
        BId = b.BId,
        sampleProperty3 = b.sampleProperty3

        //etc...
    }).ToArray()
};

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>

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

5 个答案: