React Multi Column Radio

Question

私はReactにワーカーシフトスケジューラを実装しています。私は

"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" 
    } 
] 

：

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

は、私はまた、次のシフトは、バックエンドからオブジェクトを受け取る：私はバックエンドから以下の従業員オブジェクトを受け取る

下のスクリーンショットを参照してください。 Radio component from ant-designを使用してください。私はので、私は戻ってバックエンドに送信することができますemployeeshifts状態でオブジェクトを格納することができるよう_handleChange（）上で動作する方法とstruggliよ、今

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> 
     ); 
    } 

：私のコードは次のようです。

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

各従業員は、1つのシフトに割り当てることができるので、）（そう.push使用して、無線要素の仕事に行くされていません。

Answer 1

あなたはhandleChangeにemployeeIdを渡すことができます。

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

を、サーバに送信する前に、アレイへemployeeshifts変換：

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

はオブジェクトとしてごemployeeshifts形状。