在reactjs组件的状态下动态生成属性

Question

我有非常大的表单，我希望有一个状态可以将所有用户的输入数据保存在以表单命名的不同属性中。

因此，让我们假设我有一个名称，年龄和电子邮件的形式。我希望所有这些都被保存在称为价值的状态中。所以一旦表格填写，我会有this.state.value[name],this.state.value[age]和this.state.value[email]。

但是这不起作用，当我尝试存储表单的输入数据时出现错误。

这里是handleChange（）的代码：

handleChange(e) { 
    //this.setState({value[e.target.name]: e.target.value}); //does not work 
    this.setState({[e.target.name]: e.target.value}); //works! 
} 

所以我怎么可能的值存储在从下一个状态属性的形式？

谢谢！

Answer 1

如果你不喜欢这样写道：

const value = Object.assign({}, this.state.value) 
value[e.target.name] = e.target.value 
this.setState({ value }) 

Answer 2

value[e.target.name]不是一个有效的关键。你正在尝试的是执行状态value属性的更新，为此我会推荐类似immutability-helper的东西。

在这种情况下，您的更新将如下所示：

this.setState({value: update(this.state.value, {[e.target.name]: {$set: e.target.value})})

需要注意的是，张贴在另一个答案（+1）使用Object.assign创建副本将实现同样的事情，是完全合理的在这种情况下。然而，不变性帮助器对于更复杂的更新是一个有用的工具。

Answer 3

首先，我想指出value没有在该方法中定义，这可能是您为什么会得到错误（您从未指定确切错误）的原因。

您通常会在更新值时存储这些值。

<input onChange={ e => this.setState({name: e.target.value}) />

然后，提交表单时，你将有机会获得所有值的状态对象。