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

然後，提交表單時，你將有機會獲得所有值的狀態對象。