ant-design/components/checkbox/demo/check-all.md

66 lines
1.5 KiB
Markdown
Raw Normal View History

---
order: 4
title:
zh-CN: 全选
en-US: Check all
---
## zh-CN
在实现全选效果时,你可能会用到 `indeterminate` 属性。
## en-US
The `indeterminate` property can help you to achieve a 'check all' effect.
2017-01-19 15:19:03 +08:00
````__react
import { Checkbox } from 'antd';
const CheckboxGroup = Checkbox.Group;
const plainOptions = ['Apple', 'Pear', 'Orange'];
const defaultCheckedList = ['Apple', 'Orange'];
const App = React.createClass({
getInitialState() {
return {
checkedList: defaultCheckedList,
indeterminate: true,
checkAll: false,
};
},
render() {
return (
<div>
<div style={{ borderBottom: '1px solid #E9E9E9' }}>
<Checkbox
indeterminate={this.state.indeterminate}
onChange={this.onCheckAllChange}
checked={this.state.checkAll}
>
Check all
</Checkbox>
</div>
<br />
<CheckboxGroup options={plainOptions} value={this.state.checkedList} onChange={this.onChange} />
</div>
);
},
onChange(checkedList) {
this.setState({
checkedList,
indeterminate: !!checkedList.length && (checkedList.length < plainOptions.length),
checkAll: checkedList.length === plainOptions.length,
});
},
onCheckAllChange(e) {
this.setState({
checkedList: e.target.checked ? plainOptions : [],
indeterminate: false,
checkAll: e.target.checked,
});
},
});
ReactDOM.render(<App />, mountNode);
````