React Multi Column Select 체크 박스를 선택하십시오.

Question

나는 작업자 이동 스케줄러를 구현하고 있습니다. 스크린 샷은 아래를 참조하십시오 :

내가 백엔드에서 객체의 배열을받을 수 있습니다. ,

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":"00:00","shiftEnd":"08:00"},{"shiftStart":"08:00","shiftEnd":"15:00"},{"shiftStart":"15:00","shiftEnd":"00:00"}] 

이 내가 만든 반작용 구성 요소입니다 : 첫 번째는

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

두 번째 가능한 변화입니다 직원의 목록입니다 직원과 시프트가 선택된 상태를 어떻게 만들 수 있습니까? 그래서 나는 백엔드에 보낼 수있는 객체를 만들고 싶습니다.

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

Answer 1

당신은 input 요소와 onChange 이벤트를 사용하고 직원의 ID와 해당 이벤트에 대한 각 이동 객체, 직원 목록을 저장하는 것 arraystate에서 변수를 정의 통과해야합니다.

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

:

확인 방법 state object에서 선택한 사용자를 저장하는 방법이 조각 (는 onChange 방법 당신이을해야 할 부분을 선택한 checkbox을 제거하는 추가 코드를 did't)