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

然后，提交表單后，您將可以訪問狀態對象中的所有值。