React多列选择复选框

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

这是我创建的阵营组成：

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（我以前不添加代码在onChange方法删除选定checkbox，你需要做的那部分）：

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'/>