使用嵌套的变量来反应设置状态

时间:2020-10-12 16:27:52

标签: reactjs state setstate

我的输入看起来像

<input name="data.company.name" value="Bob's Burgers" />

在onChange上,我想用它的名称来更新状态。

<input name="data.company.name" value="Bob's Burgers" onChange={(e) => this.setState({ [e.name]: e.target.value}) />

但是当我这样做时,状态看起来像

this.state = {
   data: { company: { name: '' } },
   data.company.name: "Bob's Burgers"
}

如何实现将名称传递给州,所以我最终得到

this.state = {
   data: { company: { name: "Bob's Burgers" } }
}

我无法更改通过字段组件设置的输入的名称。

1 个答案:

答案 0 :(得分:2)

如果您不介意在项目中添加lodash,则可以执行for another answer

<input
  name="data.company.name"
  value="Bob's Burgers"
  onChange={e =>
    e.persist();
    this.setState(prevState => {
      return _.setWith(_.clone(prevState), e.name, e.target.value, _.clone);
    });
  }
/>;