Wie verwaltet man den Status mit Checkboxen in React?

Question

Ich bin neu in React und ich versuche, eine Tabelle von Benutzern zu erstellen und Checkboxen zu verwenden, um ihre Berechtigungen zu verwalten. Ich habe ein Problem mit der Aktualisierung des Status beim Klicken auf ein Kontrollkästchen festgestellt. Die HandleChange-Methode ist, wo ich Probleme habe. Ich weiß nicht, wie ich das richtige Kontrollkästchen anwählen soll, um den Status für diesen bestimmten Benutzer zu ändern. Ich denke, vielleicht muss ich jedem einen ID-Prop hinzufügen, aber das scheint für eine große Anzahl von Benutzern außer Kontrolle zu geraten, d. H. Eine ID für jede Erlaubnis pro Benutzer. Ich denke, das sollte nicht so schwierig sein, aber ich stecke seit langem fest.

Mein Komponentencode ist unten.

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

Zuerst sollten Sie jedem Benutzer id 's hinzufügen. Identifizierung von Benutzern mit ihrem Namen eine schlechte Praxis ist:

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

Als nächstes sollten Sie auf die this.handleChange Funktion id des Benutzers, name von Eigentum, das wir ändern, und aktuellen 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> 
); 
} 

Und schließlich, in this.handleChange Funktion sollten wir bestimmte Benutzerdaten entsprechend den angegebenen Werten aktualisieren:

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

Überprüfen Sie den Quellcode dieser Bibliothek, um zu sehen, wie sie den Status von Kontrollkästchen verwalten. Vielleicht könnten Sie es sogar für Ihre Bedürfnisse verwenden:

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