给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] 中的方括号 [] ...我在网上找到了一些解释，但我不明白它是什么意思：

We use attr in this.setState with square brackets [ ] because [ ] lets us query object key names programmatically (similar to how array[2] or object[keyA] works)

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

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

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

这给我这个错误："Unexpected token, expected" 在 e.target.name

Answer 1

  { sth: else }

等于

  { ["sth"]: else }

或

  var id = "sth";

 { [id]: else }

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

Answer 2

此语法只是另一种设置 object 键的方法，而无需事先知道您希望它被称为什么 -- computed property name.

例如，这两个示例完成相同的事情：

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

…

const propName = 'age'

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

因此在您的示例中 - e.target.name 来自输入元素（在本例中为“标题”）的 name 属性。通过使用 [e.target.name] 设置状态键，您实际上只是在设置状态的 title 属性。

给setState中的属性加上括号[]

Adding brackets [] to the attribute in setState

javascript

reactjs

redux