在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!
}

那么，如何将状态表单中的值存储在state属性下呢？

谢谢！

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]不是有效的键。 您试图执行的是对States value属性的更新，为此我建议使用immutability-helper之类的东西。

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

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

请注意，使用Object.assign创建另一个答案（+1）中发布的副本将实现相同的目的，并且在这种情况下完全合理。 但是，不变性帮助器是进行更复杂更新的有用工具。

Answer 3

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

您通常会在更新值时存储它们。

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

然后，提交表单后，您将可以访问状态对象中的所有值。