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

React文档 page 的示例中,使用计算属性语法来设置 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的新手,并且很难理解在这个例子中如何应用计算属性语法。 任何帮助都将非常有用。

时间:

为什么将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>


 );


 }


}



...