1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
import React, { useState } from 'react';
import { Checkbox } from 'antd';
const RecursiveCheckbox = ({ data, parentChecked, onCheckChange }) => {
const [checked, setChecked] = useState(parentChecked);
const [indeterminate, setIndeterminate] = useState(false);
const handleCheckChange = e => {
setChecked(e.target.checked);
onCheckChange(e.target.checked);
};
const handleChildCheckChange = childChecked => {
if (!childChecked && checked) {
setChecked(false);
setIndeterminate(true);
} else if (childChecked && !checked) {
setChecked(true);
setIndeterminate(false);
}
};
return (
<div>
<Checkbox checked={checked} indeterminate={indeterminate} onChange={handleCheckChange}>
{data.name}
</Checkbox>
{data.children &&
data.children.map(child => (
<RecursiveCheckbox
key={child.id}
data={child}
parentChecked={checked}
onCheckChange={handleChildCheckChange}
/>
))}
</div>
);
};
export default RecursiveCheckbox;