将括号[]添加到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包含"title",我不明白为什么我们需要[e.target.name]中的方括号[] ...我在网上找到了一些解释但是我不明白这意味着什么:

我们在this.setState中使用带方括号[]的attr,因为[]允许我们以编程方式查询对象键名(类似于array [2]或object [keyA]的工作方式)

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

仅供参考:如果我删除括号,请执行以下操作:

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

这给了我这个错误:e.target.name上的"意外的令牌,预期"

Answer 1

这种语法只是另一种设置key对象的方法,而不需要提前知道您希望它被调用的内容.

例如,这两个例子完成了同样的事情:

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

...

const propName = 'age'

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

所以在你的例子中- e.target.name来自nameinput元素的属性(在本例中为"title").通过设置状态的键,[e.target.name]您实际上只是设置title状态的属性.