AntD Checkbox 的三种状态处理

绝地灬酷狼 2022-10-01 05:45 177阅读 0赞

*  对于单个 Checkbox 来说，只有两种值：选中 (checked) 或未选中 (unchecked) 。
 *  但对于 Checkbox Group 来说，却有三种值：全选 (checked) 、部分选中 (indeterminate) 、未选中(unchecked)

##### AntD 对于`Checkbox Group`的实现如下 #####

import React, { useState } from 'react';
    import ReactDOM from 'react-dom';
    import 'antd/dist/antd.css';
    import './index.css';
    import { Checkbox } from 'antd';
    
    const CheckboxGroup = Checkbox.Group;
    
    const plainOptions = ['Apple', 'Pear', 'Orange'];
    const defaultCheckedList = ['Apple', 'Orange'];
    
    const App = () => {
      const [checkedList, setCheckedList] = useState(defaultCheckedList);
      const [indeterminate, setIndeterminate] = useState(true);
      const [checkAll, setCheckAll] = useState(false);
    
      const onChange = checkedList => {
        setCheckedList(checkedList);
        setIndeterminate(
          !!checkedList.length && checkedList.length < plainOptions.length
        );
        setCheckAll(checkedList.length === plainOptions.length);
      };
    
      const onCheckAllChange = e => {
        setCheckedList(e.target.checked ? plainOptions : []);
        setIndeterminate(false);
        setCheckAll(e.target.checked);
      };
    
      return (
        <div> <div style={ { borderBottom: '1px solid #E9E9E9' }}> <Checkbox indeterminate={indeterminate} onChange={onCheckAllChange} checked={checkAll} > Check all </Checkbox> </div> <br /> <CheckboxGroup options={plainOptions} value={checkedList} onChange={onChange} /> </div> ); }; ReactDOM.render(<App />, document.getElementById('container')); 复制代码

[CodeSandBox-Checkbox Group 三种状态的实现][CodeSandBox-Checkbox Group]

##### 如果要将`Checkbox Group`变成两种状态 #####

1.  去掉全选`checkbox`的`indeterminate`属性即可
2.  改变下`onChange`里`setCheckAll`的判断条件

const onChange = checkedList => {
      setCheckedList(checkedList);
      setCheckAll(checkedList.length !== 0);
    };
    复制代码

*  完整代码如下

import React, { useState } from 'react';
    import ReactDOM from 'react-dom';
    import 'antd/dist/antd.css';
    import './index.css';
    import { Checkbox } from 'antd';
    
    const CheckboxGroup = Checkbox.Group;
    
    const plainOptions = ['Apple', 'Pear', 'Orange'];
    const defaultCheckedList = [];
    
    const App = () => {
      const [checkedList, setCheckedList] = useState(defaultCheckedList);
      const [checkAll, setCheckAll] = useState(false);
    
      const onChange = checkedList => {
        setCheckedList(checkedList);
        setCheckAll(checkedList.length !== 0);
      };
    
      const onCheckAllChange = e => {
        setCheckedList(e.target.checked ? plainOptions : []);
        setCheckAll(e.target.checked);
      };
    
      return (
        <div> <div style={ { borderBottom: '1px solid #E9E9E9' }}> <Checkbox onChange={onCheckAllChange} checked={checkAll}> Check all </Checkbox> </div> <br /> <CheckboxGroup options={plainOptions} value={checkedList} onChange={onChange} /> </div> ); }; ReactDOM.render(<App />, document.getElementById('container')); 复制代码

[CodeSandBox-Checkbox Group 两种状态的实现][CodeSandBox-Checkbox Group 1]

转载于:https://juejin.im/post/5ccecc12518825412c6504f1

[CodeSandBox-Checkbox Group]: https://link.juejin.im?target=https%3A%2F%2Fcodesandbox.io%2Fs%2F9olyy5ykwo
[CodeSandBox-Checkbox Group 1]: https://link.juejin.im?target=https%3A%2F%2Fcodesandbox.io%2Fs%2Fp9nw008pox