ReactJS - テーブルの行のドロップダウン設定

Question

私は材料表を使用しています。列の1つにSelectFieldコンポーネントがあります。これはドロップダウンから選択する項目がほとんどありません。ここではサンプルコード：すべての行のドロップダウンの

<TableBody 
     displayRowCheckbox={this.state.showCheckboxes} 
     deselectOnClickaway={this.state.deselectOnClickaway} 
     showRowHover={this.state.showRowHover} 
     stripedRows={this.state.stripedRows} 
     > 
     {tableData.map((row, index) => (
      <TableRow key={index} selected={row.selected}> 
      <TableRowColumn>{index}</TableRowColumn> 
      <TableRowColumn> 
       <SelectField key={index} value={row.clientId} onChange={this.handleRowChange}> 
       {clientsDropdownData.map((row, index) =>(
        <MenuItem key={row.val} value={row.val} primaryText={row.name} /> 

       ))} 
       </SelectField> 
      </TableRowColumn> 
      <TableRowColumn>{row.name}</TableRowColumn> 
      <TableRowColumn>{row.status}</TableRowColumn> 
      </TableRow> 
     ))} 
     </TableBody> 

初期値は、テーブルに供給されたデータからClientID値に基づいて適切に設定されています。選択した行のドロップダウンの変更時に、提供されたデータのclientIdプロパティを変更したい。どうすれば達成できますか？反応はすべて状態に関するものです。しかし、どのように私は複数の動的状態を管理できますか？

これは私がSelectFieldののonChangeために持っているものです。

handleRowChange = (event, index, rowValue) => { 
     //this.setState({rowValue}); how to set state here? 
     tableData[index]['clientId'] = rowValue; //this doesn't work. But this is what I want. I want to update tableData and also update the UI. 
    } 

Answer 1

あなたはあなたの状態で属性tableDataを使用することができます。あなたは（表データと表ビュー）、それを更新したいときは、だけで状態であなたのテーブルのデータを変更することができます。

handleRowChange = (event, index, rowValue) => { 
     let newTableData = this.state.tableData 
     newTableData[index]['clientId'] = rowValue; 
     this.setState({tableData: newTableData}); //New table set and view updated 
    } 

と交換に直接あなたの状態のテーブルを使用します。

{tableData.map((row, index) => (

{this.state.tableData.map((row, index) => (

のリアクト状態が実際にusfeulである理由があると

。あなたはそこに欲しいものを置くことができ、更新するとビューは再描画されます。あなたの状態がより複雑になる場合は、Redux