Как управлять состоянием с помощью флажков в React?

Question

Я новичок в React, и я пытаюсь создать таблицу пользователей и хочу использовать флажки для управления их разрешениями. У меня возникла проблема с обновлением состояния, когда я нажимаю флажок. Метод handleChange - это то, где у меня возникают проблемы. Я не знаю, как определить правильный флажок, чтобы изменить состояние для этого конкретного пользователя. Я думаю, может быть, мне нужно добавить идентификатор для каждого, но похоже, что он может выйти из-под контроля для большого количества пользователей, то есть одного идентификатора для каждого разрешения для каждого пользователя. Я чувствую, что это не должно быть так сложно, но я застрял в течение долгого времени.

Мой код компонента ниже.

import React from 'react' 
import {Link} from 'react-router' 
import {Panel, Button, PageHeader, Row, Col, Table, Input} from 'react-bootstrap' 


export class UserPermissions extends React.Component { 

constructor() { 
    super(); 
    this.state = { 
     users: [ 
      { 
       name: 'Jerry', 
       viewAccounts: true, 
       modifyAccounts: true, 
       viewUsers: false, 
       modifyUsers: true 
      }, 
      { 
       name: 'George', 
       viewAccounts: false, 
       modifyAccounts: true, 
       viewUsers: false, 
       modifyUsers: false 
      }, 
      { 
       name: 'Elaine', 
       viewAccounts: true, 
       modifyAccounts: false, 
       viewUsers: false, 
       modifyUsers: true 
      } 
    ] 
    }    
} 

handleChange(e){ 
    //not sure how to write this 
} 

renderHeadings(data){ 
    return data.map((step, index) => <th key={index} style={{align:"center"}}>{step}</th>); 

} 

renderRows(data){ 
    return data.map((step, index) => 
      <tr key={index}> 
       <td>{step['name']}</td> 
       <td style={{align:"center", paddingLeft:"40px"}}> 
        <Input type="checkbox" 
          checked={step['viewAccounts']} 
          onChange={this.handleChange}/></td> 
       <td style={{align:"center", paddingLeft:"40px"}}> 
        <Input type="checkbox" 
          checked={step['modifyAccounts']} 
          onChange={this.handleChange}/></td> 
       <td style={{align:"center", paddingLeft:"40px"}}> 
        <Input type="checkbox" 
          checked={step['viewUsers']} 
          onChange={this.handleChange}/></td> 
       <td style={{align:"center", paddingLeft:"40px"}}> 
        <Input type="checkbox" 
          checked={step['modifyUsers']} 
          onChange={this.handleChange} /></td> 
       <td style={{align:"center"}}> 
        <Link to="/users"><i className="fa fa-edit fa-2x fa-fw" /></Link> 
        <Link to="/users"><i className="fa fa-times-circle fa-2x fa-fw" /></Link></td> 
      </tr> 
    ); 

} 

render() { 
    return (
     <div> 
      <Row> 
       <Col lg={12}> 
        <PageHeader>User Permissions</PageHeader> 
       </Col> 

       <Col lg={12}> 
        <Panel header={<span>Users</span>} bsStyle="primary"> 
         <div> 
          <div className="dataTable_wrapper"> 
           <div id="dataTables-example_wrapper" className="dataTables_wrapper form-inline dt-bootstrap no-footer"> 
            <Row> 
             <Col sm={12}> 
              <Table striped condensed responsive> 
               <thead> 
               <tr> 
                {this.renderHeadings(this.props.headings)} 
               </tr> 
               </thead> 
               <tbody> 
                {this.renderRows(this.state.users)} 
               </tbody> 
              </Table> 
             </Col> 
            </Row> 
           </div> 
          </div> 
         </div> 
        </Panel> 
        <Button bsStyle="success">Add User</Button> 
       </Col> 
      </Row> 
     </div> 
     ); 
} 
} 

UserPermissions.propTypes = { 
headings: React.PropTypes.array 
} 

UserPermissions.defaultProps = { 
headings: ['Name', 'View Accounts', 'Modify Accounts', 'View Users', 'Modify Users'] 

} 

Answer 1

Прежде всего, вы должны добавить id всем пользователям. Идентификация пользователей по имени плохая практика:

constructor() { 
    super(); 
    this.state = { 
    users: [ 
     { 
     id: 1, 
     name: 'Jerry', 
     viewAccounts: true, 
     modifyAccounts: true, 
     viewUsers: false, 
     modifyUsers: true 
     }, 
     { 
     id: 2, 
     name: 'George', 
     viewAccounts: false, 
     modifyAccounts: true, 
     viewUsers: false, 
     modifyUsers: false 
     }, 
     { 
     id: 2, 
     name: 'Elaine', 
     viewAccounts: true, 
     modifyAccounts: false, 
     viewUsers: false, 
     modifyUsers: true 
     } 
    ] 
    }    
} 

Далее, вы должны предоставить this.handleChange функции id пользователя, name имущества мы меняющегося, и ток value:

renderRows(data) { 
    return data.map((step, index) => 
    <tr key={index}> 
     <td>{step['name']}</td> 
     <td style={{align:"center", paddingLeft:"40px"}}> 
     <Input type="checkbox" 
      checked={step['viewAccounts']} 
      onChange={e => this.handleChange(step.id, 'viewAccounts', step['viewAccounts'])}/></td> 
     <td style={{align:"center", paddingLeft:"40px"}}> 
     <Input type="checkbox" 
      checked={step['modifyAccounts']} 
      onChange={e => this.handleChange(step.id, 'modifyAccounts', step['modifyAccounts'])}/></td> 
     <td style={{align:"center", paddingLeft:"40px"}}> 
     <Input type="checkbox" 
      checked={step['viewUsers']} 
      onChange={e => this.handleChange(step.id, 'viewUsers', step['viewUsers'])}/></td> 
     <td style={{align:"center", paddingLeft:"40px"}}> 
     <Input type="checkbox" 
      checked={step['modifyUsers']} 
      onChange={e => this.handleChange(step.id, 'modifyUsers', step['modifyUsers'])}/></td> 
     <td style={{align:"center"}}> 
     <Link to="/users"><i className="fa fa-edit fa-2x fa-fw" /></Link> 
     <Link to="/users"><i className="fa fa-times-circle fa-2x fa-fw" /></Link></td> 
    </tr> 
); 
} 

И, наконец, в функции this.handleChange, мы должны обновлять конкретные пользовательские данные в соответствии с данными значениями:

handleChange(id, name, value) { 
    this.setState({ 
    users: this.state.users.map((user) => { 
     if (user.id !== id) return user; 

     // `Object.assign` function is used to return new modified object. 
     return Object.assign({}, user, { 
     // We should assign opposite to `value` variable value, as we are toggling permissions. 
     [name]: !value 
     }); 
    }); 
    }); 
} 

Answer 2

Проверьте исходный код этой библиотеки, чтобы узнать, как они управляют состоянием флажков. Может быть, вы могли бы даже использовать его для своих нужд:

https://www.npmjs.com/package/react-checkbox-group