使用嵌套的变量反应集状态

Question

我有一个看起来像的输入

<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" } }
}

我无法更改输入的名称，因为它是通过字段组件设置的。

Answer 1

如果你不介意在项目中添加lodash，你可以这样做：

<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);
});
}
/>;