react中antd使用Checkbox通过返回的数据结构实现分类多选

"react": "^18.2.0",

"antd": "^5.1.1",

先看效果（不选和多选）

// 假设后端返回数据结构
const data = {
fruit: [
{ label: 'Apple', value: 'apple' },
{ label: 'Pear', value: 'pear' },
{ label: 'Orange', value: 'orange' },
],
animal: [
{ label: 'Cat', value: 'cat' },
{ label: 'Dog', value: 'dog' },
{ label: 'Horse', value: 'horse' },
],
cat: [
{ label: 'Honda', value: 'honda' },
{ label: 'Ben', value: 'ben' },
{ label: 'Da', value: 'Da' },
]
}

完整 inde.tsx

// react中antd使用Checkbox实现分类多选
import React, { useEffect, useState } from 'react';
import { Button, Checkbox, Divider } from 'antd';
import type { CheckboxChangeEvent } from 'antd/es/checkbox';
import type { CheckboxOptionType, CheckboxValueType } from 'antd/es/checkbox/Group';
const CheckboxGroup = Checkbox.Group;
const AddList = () => {
const [groupNames, setGroupNames] = useState<string[]>([]);
const [options, setOptions] = useState<CheckboxOptionType[][]>([]);
const [indeterminates, setIndeterminates] = useState<{[key: string]: boolean}>({});
const [checkAlls, setCheckAlls] = useState<{[key: string]: boolean}>({});
const [checkedLists, setCheckedLists] = useState<{[key: string]: CheckboxValueType[]}>({});
useEffect(() => {
setTimeout(() => {
// 假设后端返回数据结构
const data = {
fruit: [
{ label: 'Apple', value: 'apple' },
{ label: 'Pear', value: 'pear' },
{ label: 'Orange', value: 'orange' },
],
animal: [
{ label: 'Cat', value: 'cat' },
{ label: 'Dog', value: 'dog' },
{ label: 'Horse', value: 'horse' },
],
cat: [
{ label: 'Honda', value: 'honda' },
{ label: 'Ben', value: 'ben' },
{ label: 'Da', value: 'Da' },
]
}
// 将keys 和 values 分开存储
setGroupNames(Object.keys(data))
setOptions(Object.values(data))
// 当个单选及全选样式修改
const keys = Object.keys(data)
const ins = {} as any
keys.map(item => ins[item] = false)
setIndeterminates(ins)
setCheckAlls(ins)
}, 500);
// // 测试异步赋值， 已测，可实现
// setTimeout(() => {
// setCheckedLists({...checkedLists, fruit: ['apple', 'orange'], animal: ['dog']})
// }, 1000);
}, [])
const OnChange= (item: string, i: number, list: CheckboxValueType[]) => {
const plainOptiOns= options[i].map(item => item.value)
setCheckedLists({...checkedLists, [item]: list});
setIndeterminates({ ...indeterminates, [item]: !!list.length && list.length < plainOptions.length });
setCheckAlls({ ...checkAlls, [item]: list.length === plainOptions.length });
};
const onCheckAllChange = (item: string, i:number, e: CheckboxChangeEvent) => {
const plainOptiOns= options[i].map(item => item.value)
setCheckedLists({ ...checkedLists, [item]: e.target.checked ? plainOptions : []});
setIndeterminates({ ...indeterminates, [item]: false });
setCheckAlls({ ...checkAlls, [item]: e.target.checked });
};

const checkGroup = groupNames.map((item, index) => {
return (
<div key={index}>
<Checkbox indeterminate={indeterminates[item]} onChange={(e) => onCheckAllChange(item, index, e)} checked={checkAlls[item]}>{item}Checkbox>
<br/>
<CheckboxGroup options={options[index]} value={checkedLists[item]} onChange={(list) => onChange(item, index, list)} />
<Divider />
div>
)
})
return (
<>
{checkGroup}
<div>
选中数据：{JSON.stringify(checkedLists)}
div>

)
}
export default AddList;