Así que estoy usando este paquete "react-checkbox-tree" para hacer una casilla de verificación, pero dado que esto está hecho en componentes de clases y necesito hacerlo con funciones y ganchos, esto está siendo un poco complicado para mis habilidades reales.
//Checkbox Tree const [checkedTree, setCheckedTree] = useState([]); const [expandedTree, setExpandedTree] = useState(["1"]); const [filterText, setFilterText] = useState(""); const [nodesFiltered, setNodesFiltered] = useState(); ///FILTER LOGIC ///// const onFilterChange = (e) => { setFilterText(e.target.value); if (e.target.value) { filterTree(); } }; const filterTree = () => { // Reset nodes back to unfiltered state if (!filterText || filterText === "" || filterText.length === 0) { setNodesFiltered(nodes); return; } const nodesFiltered = (nodes) => { return nodes.reduce(filterNodes, []); }; setNodesFiltered(nodesFiltered); }; const filterNodes = (filtered, node) => { const children = (node.children || []).reduce(filterNodes, []); if ( // Node's label matches the search string node.label.toLocaleLowerCase().indexOf(filterText.toLocaleLowerCase()) > -1 || // Or a children has a matching node children.length ) { filtered.push({ ...node, ...(children.length && { children }) }); } return filtered; }; //Mi primer problema es que cuando busco el padre, solo obtengo los últimos hijos de la matriz por alguna razón.
El segundo es que cuando uso el botón de retroceso, el filtro deja de funcionar hasta que limpio todos los caracteres.
Hice un codesandbox para ayudarlos a comprender los problemas: https://codesandbox.io/s/checkboxtree-6gu60
Este es el ejemplo con clases: https://github.com/jakezatecky/react-checkbox-tree/blob/master/examples/src/js/FilterExample.js
¡Gracias de antemano!