Javascript 反应多列选择复选框

我正在实施一个工人轮班计划。请参见下面的屏幕截图：

我从后端接收一个对象数组。第一个是员工名单

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

第二个是班次：

[{"shiftStart":"00:00","shiftEnd":"08:00"},{"shiftStart":"08:00","shiftEnd":"15:00"},{"shiftStart":"15:00","shiftEnd":"00:00"}]

这是我创建的React组件：

    class PlanningShiftManagement extends Component {
    render() {
        const availableShifts = this.props.shifts.map((shift) => {
            return (
                <th>
                    {shift.shiftStart} - {shift.shiftEnd}
                </th>
            )
        })

        const employees = this.props.employeeList.map((employee) => {
            let employeecheckbox = this.props.shifts.map((shift) => {
                return(
                    <td>
                        <input type="checkbox" />
                    </td>
                )
            });
            return(
                <tr className="table-row">
                    <td>{employee.title}</td>
                    {employeecheckbox}
                </tr>
            )
        })
        return(
            <div>
                <table className="scheduler-table">
                    <thead className="table-head">
                        <tr>
                            <th>Employee Name</th>
                            {availableShifts}
                        </tr>
                    </thead>
                    <tbody className="table-body">
                        {employees}
                    </tbody>
                </table>
            </div>
        );
     }
   }

---

您需要将

onChange

事件与

input

元素一起使用，并将员工id和每个轮班对象传递给该事件，在

state

中定义一个将存储员工列表的

数组

检查此代码段，如何在
状态对象
中存储所选用户（未添加代码以删除
onChange
方法中所选的
复选框
，您需要执行的部分）：


let employee=[{
“雇员ID”：“1”，
“姓名”：“鲍勃”
},{
“雇员ID”：“2”，
“姓名”：“史蒂夫”，
}];
设shift=[{“shiftStart”：“00:00”，“shiftEnd”：“08:00”}，{“shiftStart”：“08:00”，“shiftEnd”：“15:00”}，{“shiftStart”：“15:00”，“shiftEnd”：“00:00”}]；
类PlanningShiftManagement扩展React.Component{
构造函数（）{
超级（）；
this.state={users:[]}
}
_populateTableData（）{
返回此.props.employeeList.map（（employee）=>{
let employeecheckbox=this.props.shift.map（（shift）=>{
返回(
)
});
返回(
{employee.name}
{employeecheckbox}
)
})
}
_输入更改（班次、员工ID）{
让users=JSON.parse（JSON.stringify（this.state.users））；
用户推送({
开始：shift.shiftStart，
结束：shift.shiftEnd，
id:雇员id
});
this.setState（{users}）；
console.log（用户）；
}
render（）{
const availableShifts=this.props.shifts.map（（shift）=>{
返回(
{shift.shiftStart}-{shift.shiftEnd}
)
})
返回(
员工姓名
{availableShifts}
{this.\u populateTableData（）}
);
}
}
ReactDOM.render（，document.getElementById（'app'））

你能说得更具体一点吗。您在后端已经有了班次数据和员工数据，但是您希望您的React组件更改数据的“形状”并重新提交到后端？您可以控制数据在后端的保存方式吗？您只需要为每个员工选中所有复选框值，这样您就可以按员工选择所有班次谢谢。但是，我在设置选中状态的状态时遇到问题。现在，当您选中一个复选框时，它不会将复选框显示为选中状态，因为我不知道如何设置选中状态。
 [{
"shiftStart": "20170313 10:00",
"shiftEnd": "20170313 17:00",
"employeeId": "id"
}]