Reactでチェックボックスを使用して状態を管理する方法は？

Question

私はReactを初めて使用しており、ユーザーのテーブルを作成しようとしており、そのアクセス許可を管理するためにチェックボックスを使用したいと考えています。チェックボックスをクリックすると状態が更新される問題が発生しました。私が問題を抱えている場所はhandleChangeメソッドです。特定のユーザーの状態を変更するための正しいチェックボックスを特定する方法を知りません。私はそれぞれにid propを追加する必要があるかもしれないと思っているかもしれませんが、それは多数のユーザー、すなわちユーザーごとに1つのIDごとに1つのIDが不足するように思えるかもしれません。これは難しいことではないはずですが、私は長い間立ち往生しています。

私のコンポーネントコードは以下の通りです。

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