javascript - React 多列收音机

Question

我正在 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"
  }
]

我正在使用ant-design 的 Radio 组件。我的代码如下：

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

现在，我正在努力研究如何处理 _handleChange() 以便可以将对象存储在employeeshifts 状态中，以便可以将其发送回后端。

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

由于每个员工只能被分配到一个班次，它是一个 Radio 元素，所以使用 .push() 是行不通的。

Answer 1

你可以传递employeeId给handleChange：

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

将你塑造employeeshifts成一个对象：

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

employeeshifts并在发送到服务器之前转换为数组。