antd中的a-checkbox-group怎么实现复选
时间: 2024-02-07 17:36:41 浏览: 173
antd中的`Checkbox.Group`组件可以实现复选框的功能。下面是一个简单示例:
```jsx
import { Checkbox } from 'antd';
const plainOptions = ['Apple', 'Pear', 'Orange'];
const defaultCheckedList = ['Apple', 'Orange'];
class CheckboxGroupDemo extends React.Component {
state = {
checkedList: defaultCheckedList,
indeterminate: true,
checkAll: false,
};
onChange = checkedList => {
this.setState({
checkedList,
indeterminate: !!checkedList.length && checkedList.length < plainOptions.length,
checkAll: checkedList.length === plainOptions.length,
});
};
onCheckAllChange = e => {
const { checked } = e.target;
this.setState({
checkedList: checked ? plainOptions : [],
indeterminate: false,
checkAll: checked,
});
};
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 />
<Checkbox.Group options={plainOptions} value={this.state.checkedList} onChange={this.onChange} />
</div>
);
}
}
ReactDOM.render(<CheckboxGroupDemo />, mountNode);
```
在这个例子中,`Checkbox.Group`组件的`options`属性指定了可选项的数组,`value`属性指定了选中项的数组,`onChange`属性指定了当选中项改变时的回调函数。同时,我们还使用了`Checkbox`组件实现了全选的功能。
运行这段代码,你可以看到一个可供选择的复选框列表,以及一个全选的复选框。当选择的项发生变化时,会触发`onChange`回调函数,我们可以在这个回调函数中更新`checkedList`等状态。
阅读全文