React多列無線電

我在React中實施了一個工作班次調度程序。見下面React多列無線電

我收到來自後端以下員工對象截圖：

[{ 
    "employeeId": "id", 
    "name": "bob" 
},{ 
    "employeeId": "id", 
    "name": "steve", 
}]

我也收到以下轉變從後端對象：

"shifts": [ 
    { 
    "shiftStart": "03:00", 
    "shiftEnd": "07:00" 
    }, 
    { 
    "shiftStart": "16:00", 
    "shiftEnd": "24:00" 
    }, 
    { 
    "shiftStart": "18:00", 
    "shiftEnd": "00:00" 
    }, 
    { 
    "shiftStart": "12:10", 
    "shiftEnd": "17:10" 
    } 
]

我使用Radio component from ant-design。我的代碼如下：

class PlanningShiftManagement extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      employees: [], 
      shifts: [], 
      employeeshifts: [] 
     } 
     this._populateTableData = this._populateTableData.bind(this) 
     this._handleChange = this._handleChange.bind(this) 
    } 

    _populateTableData(){ 
     return this.state.employees.map((employee,index) => { 
      let employeecheckbox = this.state.shifts.map((shift) => { 
       return(
       <RadioButton value={[`${shift.shiftStart}`, `${shift.shiftEnd}`, `${employee.key}`]} key={`${employee.title}-${shift.shiftStart}-${shift.shiftEnd}`}>{shift.shiftStart} - {shift.shiftEnd}</RadioButton> 
      ) 
      }); 
      return(
       <tr key={employee.title}> 
        <td>{employee.title}</td> 
        <td> 
         <RadioGroup onChange={(e) => this.handleChange(e.target.value)}> 
         {employeecheckbox} 
         </RadioGroup> 
        </td> 
       </tr> 
     ) 
     }) 
    } 

    _handleChange() { 

    } 


    render() { 
     return(
      <div> 
       <table> 
        <thead> 
         <tr> 
          <th>Employee Name</th> 
          <th>Shifts</th> 
         </tr> 
        </thead> 
        <tbody> 
         {this._populateTableData()} 
        </tbody> 
       </table> 
      </div> 
     ); 
    }

現在，我struggli着如何在_handleChange（）的工作，這樣我可以存儲在employeeshifts狀態的對象，所以我可以發送回後臺。

[{ 
    "shiftStart": "20170313 10:00", 
    "shiftEnd": "20170313 17:00", 
    "employeeId": "id" 
}, 
{ 
    "shiftStart": "20170313 10:00", 
    "shiftEnd": "20170313 17:00", 
    "employeeId": "id" 
}]

由於每個僱員可僅被分配給一個移位，這是一個無線電元件，因此，使用.push（）是不會工作。

來源

2017-04-12 William Pramana

你可以通過employeeId到handleChange：

<RadioGroup onChange={(e) => this.handleChange(e.target.value, employee.id)}>

塑造你employeeshifts作爲一個對象：

{ 
    "employeeId": { 
    "shiftStart": "20170313 10:00", 
    "shiftEnd": "20170313 17:00", 
    }, 
}

和改造employeeshifts到陣列之前發送到服務器。

來源

2017-04-13 03:00:40 yesmeck

React多列無線電

回答

相關問題