Question

我在构造函数中有这个

this.state = {
  inputs : {}
}

handleInputChange中的内容（在输入模糊时触发）

handleInputChange(event) {
    const target = event.target;
    const value = target.value;
    const name = target.name;

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

这样我的状态就会变成

inputs : { name1 : "text1", "name2": "text2" }

我收到此语法错误

 Unexpected token, expected , (20:12)

this.setState({
> 20 |       inputs[name]: value
     |             ^
  21 |     });

正确的语法是什么？

Answer 1

handleInputChange(event) {
  const target = event.target;
  const value = target.value;
  const name = target.name;
  let updatedInputs = this.state.inputs;
  updatedInputs[name]= value;
  this.setState({
    inputs: updatedInputs
  });
}

Answer 2

与其传递对象文字，不如传递一个对对象的引用。

使用此方法，您可以在传递对象之前将计算的（或半计算的）属性添加到对象。

handleInputChange(event) {
  const target = event.target;
  const value = target.value;
  const name = target.name;
  let state = {inputs: this.state.inputs};
  state.inputs[name] = value

  this.setState(state);
}

Answer 3

虽然上面的方法行得通，但最好用一堆“较小”的属性管理状态而不是管理一个大对象。原因是一切都取决于顶层状态属性（即输入），每次更改时都会更新。如果直接在状态下输入每个输入都是其自己的属性，则更新的次数将更少，并且更新的速度会更快（在这种情况下可能不会引起注意）。

handleInputChange(event) {
    const target = event.target;
    const value = target.value;
    const name = target.name;
    this.setState({name: value});
}

Answer 4

我认为问题在于inputs变量未启动。

这应该有效

handleInputChange(event) {
const target = event.target;
const value = target.value;
const name = target.name;
let inputs = {}
this.setState({
  inputs[name]: value
});

}

在另一个对象中动态创建对象

4 个答案: