如何在 React 中使用复选框管理状态?
How to manage state with checkboxes in React?
我是 React 的新手,我正在尝试创建一个 table 用户并希望使用复选框来管理他们的权限。单击复选框时,我 运行 遇到更新状态的问题。 handleChange 方法是我遇到问题的地方。我不知道如何确定正确的复选框来更改特定用户的状态。我在想也许我需要为每个添加一个 id 道具,但这似乎对于大量用户来说可能会失控,即每个用户的每个权限都有一个 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']
}
首先,您应该为每个用户添加 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
});
});
});
}
查看此库的源代码以了解它们如何管理复选框的状态。也许您甚至可以根据需要使用它:
我是 React 的新手,我正在尝试创建一个 table 用户并希望使用复选框来管理他们的权限。单击复选框时,我 运行 遇到更新状态的问题。 handleChange 方法是我遇到问题的地方。我不知道如何确定正确的复选框来更改特定用户的状态。我在想也许我需要为每个添加一个 id 道具,但这似乎对于大量用户来说可能会失控,即每个用户的每个权限都有一个 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']
}
首先,您应该为每个用户添加 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
});
});
});
}
查看此库的源代码以了解它们如何管理复选框的状态。也许您甚至可以根据需要使用它: