AntD Checkbox 的三种状态处理

最新推荐文章于 2025-06-03 09:13:06 发布

转载最新推荐文章于 2025-06-03 09:13:06 发布 · 1.4w 阅读

4 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5ccecc12518825412c6504f1

文章标签：

#javascript #ViewUI

本文探讨了AntD中的Checkbox组件在单个和组情况下的状态管理。对于Checkbox Group，存在全选、部分选中和未选中三种状态。通过CodeSandBox示例，展示了如何实现这三种状态，并解释了如何简化为仅包含全选和未选中的两种状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

对于单个 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 三种状态的实现

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

去掉全选checkbox的indeterminate属性即可
改变下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'));
复制代码