React Multi Column选择复选框

Question

我正在实施一个工人班次调度员。见下面的截图：

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

[{
    "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>
        );
     }
   }

现在，我的问题是，如何创建包含员工和所选班次的州。所以我想创建一个可以发送到后端的对象。

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

Answer 1

您需要将onChange事件与input元素一起使用，并将员工ID和每个班次对象传递给该事件，在array变量中定义state将存储员工名单。

检查此代码段，如何将所选用户存储在state object中（未添加代码以移除checkbox中的所选onChange方法，你需要做的那部分）：

let employee = [{
    "employeeId": "1",
    "name": "bob"
},{
    "employeeId": "2",
    "name": "steve",
}];

let shift = [{"shiftStart":"00:00","shiftEnd":"08:00"},{"shiftStart":"08:00","shiftEnd":"15:00"},{"shiftStart":"15:00","shiftEnd":"00:00"}];

class PlanningShiftManagement extends React.Component {
        constructor(){
            super();
            this.state = {users: []}
        }
    
        _populateTableData(){
            return this.props.employeeList.map((employee) => {
                let employeecheckbox = this.props.shifts.map((shift) => {
                    return(
                        <td>
                            <input type="checkbox" onChange={this._inputChange.bind(this, shift, employee.employeeId)}/>
                        </td>
                    )
                });
                return(
                    <tr className="table-row">
                        <td>{employee.name}</td>
                        {employeecheckbox}
                    </tr>
                )
            })
        }
    
        _inputChange(shift, employeeId){
            let users = JSON.parse(JSON.stringify(this.state.users));
            users.push({
                start: shift.shiftStart,
                end: shift.shiftEnd,
                id: employeeId
            });
            this.setState({users});
            console.log(users);
        }
    
        render() {
            const availableShifts = this.props.shifts.map((shift) => {
                return (
                    <th>
                        {shift.shiftStart} - {shift.shiftEnd}
                    </th>
                )
            })
    
            return(
                <div>
                    <table className="scheduler-table">
                        <thead className="table-head">
                            <tr>
                                <th>Employee Name</th>
                                {availableShifts}
                            </tr>
                        </thead>
                        <tbody className="table-body">
                            {this._populateTableData()}
                        </tbody>
                    </table>
                </div>
            );
         }
    }
    
    ReactDOM.render(<PlanningShiftManagement employeeList = {employee} shifts={shift}/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>