对象的key值加中括号的问题

Question

class Reservation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isGoing: true,
      numberOfGuests: 2
    };

    this.handleInputChange = this.handleInputChange.bind(this);
  }

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

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

  render() {
    return (
      <form>
        <label>
          参与:
          <input
            name="isGoing"
            type="checkbox"
            checked={this.state.isGoing}
            onChange={this.handleInputChange} />
        </label>
        <br />
        <label>
          来宾人数:
          <input
            name="numberOfGuests"
            type="number"
            value={this.state.numberOfGuests}
            onChange={this.handleInputChange} />
        </label>
      </form>
    );
  }
}

请问这里为什么要使用中括号，不加中括号不可以吗？

Answer 1

不加中括号不可以；加与不加的结果是不同的

var name = 'key1'
var a = {name:1}
var b = {[name]:1}

console.log(a) //{name: 1}
console.log(b) //{key1: 1}

Answer 2

不可以，不加中括号就被认为是一个字符串了，对象的 key 为一个字符串，而不是一个变量。这个是JS的语法。其他的作用评论已经有回复了。