Question

我的国家如下：

this.state = {
  Form: {},
  Result: {
    Duplicate: false,
    ServerError: false
  }
};

我希望在输入时使用字段值动态添加到Form对象，因此我尝试使用标准方法添加动态键：

handleChange(event) {
  const target = event.target;
  const value = target.type === 'checkbox' ? target.checked : target.value;
  const name = target.name;
  this.setState({
    Form[name]: value
  });
}

但是这会产生这种语法错误：

  66 |         const name = target.name;
  67 |         this.setState({
> 68 |             Form[name]: value
     |                 ^
  69 |         });
  70 |         console.log(this.state)
  71 |     }

还有另一种方法可以达到这个目的吗？

Answer 1

我相信这是实现它的正确方法

this.setState(prevState => ({
  Form: {
    ...prevState.Form,
    [name]: value,
  }
}));

Answer 2

您刚刚使用了无效语法来创建动态对象键。你需要这样做：

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

ReactJS setState具有多维对象和动态密钥

2 个答案: