React - テーブル内の複数のSelectFieldを処理する

Question

テーブル内の動的な方法で各selectFieldの値を設定しようとしています。ここに私のコードは、これまでのところで、問題は、私は1 selectFieldを変更すると、それはそれらのすべてを変更し、私はそれが期待どおりに動作するようにする方法を見つけ出すことはできませんで、一方だけが

を選択し、更新

import { 
    Table, 
    TableBody, 
    TableHeader, 
    TableHeaderColumn, 
    TableRow, 
    TableRowColumn, 
} from 'material-ui/Table'; 

const months = []; 
for (let i = 1; i <= 12; i++) { 
    months.push(<MenuItem value={i} key={i} primaryText={`${i}`} />); 
} 
class Month extends Component { 
    handleMonth = (value) => { 
     this.setState({ 
      month: value 
     }); 
    }; 
render() { 
    return 
    <Table selectable={false}> 
     <TableHeader 
      displaySelectAll={false} 
      adjustForCheckbox={false}> 
      <TableRow> 
       <TableHeaderColumn>Meses</TableHeaderColumn> 
      </TableRow> 
     </TableHeader> 
     <TableBody displayRowCheckbox={false} > 
      {itemsMonths.map((row, index) => (
       <TableRow key={row.id}> 
        <TableRowColumn> 
         <SelectField 
          value={this.state.month} 
          onChange={this.handleMonth}> 
          {months} 
         </SelectField> 
        </TableRowColumn> 
       </TableRow> 
      ))} 
     </TableBody> 
    </Table> 

} 

誰かが私を助けることができる

？

Answer 1

理由は、すべてのSelectfieldを単一の状態値で制御しているため、その状態値を変更しているときに、すべてのSelectfieldで変更を行っています。

---

解決策：代わりに各Selectfieldの値に、単一状態の利用アレイを用いる

、そして、特定の値でないすべての値を更新します。

ステップ1：

constructor(){ 
    super(); 
    this.state = {month: []} 
} 

ステップ2：Selectefieldsため使用して、特定の値（フィールドごとに1つの値）：

<SelectField 
    value={this.state.month[index] || null} 
    .... 

コンストラクタで配列として月定義ステップ3：配列の特定の値を更新するonChange関数の各SelectFieldのインデックスを渡す：

<SelectField 
    .... 
    onChange={this.handleMonth.bind(this, index)}> 
    {months} 
</SelectField> 

ステップ4：更新のonChange関数の特定の値：

handleMonth(index, value){ 
    let month = [...this.state.month];  //or this.state.month.slice(0) 
    month[index] = value; 
    this.setState({ month }); 
} 

全コード：

class Month extends Component { 

    constructor(){ 
     super(); 
     this.state = { 
      month: [] 
     } 
    } 

    handleMonth(index, value){ 
     let month = [...this.state.month]; 
     month[index] = value; 
     this.setState({ month }); 
    } 

    render() { 
     return(
      <Table selectable={false}> 
       .... 

       <SelectField 
        value={this.state.month[index] || null} 
        onChange={this.handleMonth.bind(this, index)}> 
        {months} 
       </SelectField> 

       .... 
      </Table> 
     ) 
    } 
} 

Answer 2

あなたはすべての行に対して1つだけの状態変数を維持しています。そのため、1つの選択フィールドを変更するたびに、すべての選択フィールドに反映されます。したがって、1つの状態変数だけを保持する代わりに、複数の状態変数または配列を取ることができます。

import { 
    Table, 
    TableBody, 
    TableHeader, 
    TableHeaderColumn, 
    TableRow, 
    TableRowColumn, 
} from 'material-ui/Table'; 

const months = []; 
for (let i = 1; i <= 12; i++) { 
    months.push(<MenuItem value={i} key={i} primaryText={`${i}`} />); 
} 
class Month extends Component { 
    constructor(){ 
     this.state = { month: []} 
    } 
    handleMonth = (index) => { 
     return (value) => { 
      let tmp = [...this.state.month]; 
      tmp[index] = value; 
      this.setState({ 
      month: tmp 
      }); 
     } 
    }; 
    render() { 
    return 
     <Table selectable={false}> 
     <TableHeader 
      displaySelectAll={false} 
      adjustForCheckbox={false}> 
      <TableRow> 
       <TableHeaderColumn>Meses</TableHeaderColumn> 
      </TableRow> 
     </TableHeader> 
     <TableBody displayRowCheckbox={false} > 
      {itemsMonths.map((row, index) => (
       <TableRow key={row.id}> 
        <TableRowColumn> 
         <SelectField 
          value={this.state.month[index]} 
          onChange={this.handleMonth(index)}> 
          {months} 
         </SelectField> 
        </TableRowColumn> 
       </TableRow> 
      ))} 
     </TableBody> 
    </Table> 

}