Estoy usando la casilla de verificación antd. Estoy almacenando valores marcados usando una matriz de objetos, pero necesito que la casilla de verificación se vea como una imagen.

Tengo una matriz de objetos para la casilla de verificación antd.

 const plainOptions1 = [ { name: 'parrent-1', key: 'Apple', child: [ { name: 'Pear', key: 'pear' }, { name: 'store', key: 'store' }, ], }, { name: 'parrent-2', key: 'blue', child: [ { name: 'green', key: 'green' }, { name: 'yellow', key: 'yellow' }, ], }, { name: 'Orange', key: 'Orange', }, ];

aquí hay objetos de casilla de verificación seleccionados por defecto:

 const defaultCheckedList = [ { name: 'parrent-1', key: 'parrent-1' }, { name: 'Orange', key: 'Orange', }, ];

aquí está el método de mi código de intento de esfuerzo

 const [checkedList, setCheckedList] = React.useState( defaultCheckedList.map((item) => item.name) ); const [indeterminate, setIndeterminate] = React.useState(true); const [checkAll, setCheckAll] = React.useState(false);

cuando el usuario haga clic en la casilla de verificación, el valor se marcará y se desmarcará

 const onChange = (list) => { setCheckedList(list); setIndeterminate(!!list.length && list.length < plainOptions1.length); setCheckAll(list.length === plainOptions1.length); };

cuando el usuario haga clic en padre-1, el valor se verificará en padre-1

 const onCheckAllChange = (e) => { setCheckedList( e.target.checked ? plainOptions1.map((item) => item.name) : [] ); setIndeterminate(false); setCheckAll(e.target.checked); }; {plainOptions1.map((item) => ( <div> <Checkbox indeterminate={indeterminate} onChange={onCheckAllChange} checked={checkAll} > {item.name} </Checkbox> <Divider /> <CheckboxGroup options={item && item.child && item.child.map((item) => item.name)} value={checkedList} onChange={onChange} /> <Divider /> </div>

Aquí está mi código de prueba: https://stackblitz.com/edit/react-xb1tkk