React - 處理表

Question

中的多個SelectField

我試圖在表內動態地設置每個selectField的值。這是到目前爲止我的代碼，但問題是當我改變一個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的值，並且僅更新特定值不是所有的值。

步驟1：定義每月在構造的數組：

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

步驟2：使用特定的值（對於每個字段中的一個值），用於Selectefields：

<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

你只維持一個狀態變量的所有行。這就是爲什麼每當您更改一個選擇字段時，它都會反映到所有選擇字段。因此，不要只維護一個狀態變量，而要多個狀態變量或一個數組。

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> 

}