将括号[]添加到setState

Question

我试图设置一个我从输入目标中获取的状态：

这是我的构造函数和我的方法：

constructor(props) {
    super(props);

    this.state = {
        title: ''
    };
    this.onChange = this.onChange.bind(this);
}

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

其中输入由此代码定义：

<input type={"text"} name={"title"} value={this.state.title} onChange={this.onChange}/>

当我调试我的代码时，我发现e.target.name包含＆＃34; title＆＃34;我不明白为什么我们需要[e.target.name]中的方括号[] ...我在网上找到了一些解释，但我不明白这意味着什么：

  

我们在this.setState中使用带方括号[]的attr，因为[]允许   我们以编程方式查询对象键名（类似于数组[2]或   对象[keyA]工作）

你能帮助我理解为什么我们需要这些括号吗？

仅供参考：如果我删除括号：

onChange(e) {
        this.setState({
            e.target.name : e.target.value
        });
    }

这给了我这个错误：＆＃34;意外的令牌，预期＆＃34;在e.target.name

Answer 1

这种语法只是另一种设置对象key的方法，而不会提前知道你希望它被调用的内容。

例如，这两个例子完成了同样的事情：

const myNewObject = {
  name: 'Joe',
  age: 30
}

...

const propName = 'age'

const myNewObject = {
  name: 'Joe',
  [propName]: 30
}

因此，在您的示例中，e.target.name来自输入元素的name属性（＆＃34; title＆＃34;，在本例中）。通过使用[e.target.name]设置状态键，您实际上只是设置了州的title属性。

Answer 2

  { sth: else }

等于

  { ["sth"]: else }

或

  var id = "sth";

 { [id]: else }

所以当你想要评估标识符而不是拿它时，你基本上需要它。