基于Ant Design实现动态Checkbox：默认全选及状态同步问题

问题解决思路 #

针对你需要默认全选、取消勾选时识别变化并过滤数据的需求，直接用Checkbox.Group统一管理状态即可解决单个Checkbox状态难维护、CheckboxGroup配置错误的问题，以下是可运行的修正方案：

import React, { useState } from 'react';
import { Checkbox } from 'antd';

// 替换为你的业务数据
const rawData = [
  { label: '用户ID', value: 'userId' },
  { label: '用户名', value: 'userName' },
  { label: '邮箱', value: 'email' },
];

export default function CheckboxFilterDemo() {
  // 初始化选中所有选项的value，实现默认全选
  const [selectedValues, setSelectedValues] = useState<string[]>(
    rawData.map(item => item.value)
  );

  // 处理勾选状态变化
  const handleChange = (newSelectedValues: string[]) => {
    setSelectedValues(newSelectedValues);
    
    // 识别被取消的选项（可选需求）
    const canceledItems = selectedValues.filter(val => !newSelectedValues.includes(val));
    if (canceledItems.length) {
      console.log('取消勾选的选项:', canceledItems);
    }

    // 过滤得到仅包含选中字段的数据
    const filteredData = rawData.filter(item => newSelectedValues.includes(item.value));
    console.log('过滤后的数据:', filteredData);
    // 此处可将filteredData用于后续业务渲染
  };

  return (
    <div>
      <Checkbox.Group
        options={rawData}
        value={selectedValues}
        onChange={handleChange}
      />
      <div style={{ marginTop: 16 }}>
        当前选中字段: {selectedValues.join('、')}
      </div>
    </div>
  );
}

关键细节说明 #

• 默认全选实现：通过useState初始化时，将原始数据的所有value组成数组传入，让CheckboxGroup默认全选所有选项。
• 状态统一管理：Checkbox.Group自动维护选中状态，onChange回调直接返回当前所有选中的value数组，无需手动处理单个Checkbox的状态。
• 取消选项识别：对比更新前后的选中数组，找出不在新数组中的值，即可定位被取消的选项。
• 数据过滤：用新的选中数组直接过滤原始数据，快速得到仅包含选中字段的结果。

内容的提问来源于stack exchange，提问作者user9832432