Question

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

因此，假设我有一个名称，年龄和电子邮件的表单。我希望所有这些都保存在名为value的状态中。因此，填写表单后，我会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）中发布的副本将实现相同的目的，在这种情况下完全合理。但是，不变性帮助程序是进行更复杂更新的有用工具。

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

2 个答案: