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

请注意，使用 Object.assign 创建另一个答案 (+1) 中发布的副本将实现相同的目的，在这种情况下是完全合理的。然而，不变性助手是一个有用的工具，可以用于更复杂的更新。

Answer 3

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

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

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

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

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

Dynamically generating properties in a reactjs component's state

javascript

forms

reactjs

react-jsx