React - 基於用戶輸入設置對象的狀態

我有一個API，它返回一個對象，我以組件狀態存儲爲'content'。我使用這種狀態預先填充輸入字段的頁面。用戶可以對這些輸入進行更改，從而改變我的狀態。提交表單只是將這個新的內容對象傳遞給一個保存API，然後保存這些更改。React - 基於用戶輸入設置對象的狀態

一個簡單的函數監聽輸入的onChange事件，然後會改變根據輸入的名字我的狀態（從科裏府對Pluralsight陣營教程拍攝）：

updateContentState = (e) => { 
    const field = e.target.name; 
    const content = Object.assign({}, this.state.content); 
    content[field] = e.target.value; 
    this.setState({ content }); 
} 

<ManageContentForm 
    onChange={this.updateContentState} 
    content={this.state.content} 
/>

我會調用該函數在我ManageContentForm部件像這樣：

<TextInput 
    name="title" 
    label="Title" 
    value={content.title} 
    onChange={onChange} 
/>

這工作很大用於頂層的鍵/值對，但是我有main_content鍵，其中包括對象的數組。儘管頂級鍵/值總是存在，但main_content內部的數據是自由形式的（用戶可以點擊一個按鈕來添加新的標題，段落，手風琴，項目符號等），所以有時這將是空的，並且有時候會有一個對象的負載。這是我的JSON的一個例子。

title: '', 
summary: '', 
main_content: [ 
    { 
    data: 'Notes', 
    type: 'heading', 
    }, 
    { 
    data: [ 
     { 
     detail: '', 
     title: '', 
     }, 
    ], 
    type: 'accordion', 
    }, 
],

說我有一個文本輸入這是在「細節」鍵改變數值，同樣的方法，作爲頂級的鍵/值對不工作是什麼在起作用？

<TextInput 
    name="main_content[1].data.title" 
    label="Accordian Title" 
    value={content.main_content[1].data.title} 
    onChange={onChange} 
/>

值得注意的是，我使用的是.map來遍歷main_content中的對象，因此我可以訪問每個特定對象的索引。

來源

2017-08-16 GuerillaRadio