React - CheckboxTree 过滤器答案

【问题标题】：React - CheckboxTree filterReact - CheckboxTree 过滤器
【发布时间】：2022-08-22 02:07:45
【问题描述】：

所以我使用这个包“react-checkbox-tree”来制作一个复选框，但由于这是在类组件上制作的，我需要用函数和钩子来做，这对我的实际技能来说有点棘手。

//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;
  };
  //

我的第一个问题是，当我搜索父级时，由于某种原因，我只得到了数组的最后一个子级。
第二个是当我使用退格按钮时，过滤器停止工作，直到我清除每个字符。

我做了一个codeandbox来帮助你们理解问题： https://codesandbox.io/s/checkboxtree-6gu60

这是关于类的示例： https://github.com/jakezatecky/react-checkbox-tree/blob/master/examples/src/js/FilterExample.js

提前谢谢！

代码必须在问题本身中。见How do I create a React Stack Snippet with JSX support?。谢谢。

标签： javascript reactjs checkbox

【解决方案1】：

对于您的第二个问题，我通过从我的搜索输入中传递 onKeyDown 和 onChange 来解决它：

<input
  type="text"
  onChange={onFilterChange}
  onKeyDown={onBackspace}
/>

哪个调用

// If the user deletes the search terms, reset to unfiltered
const onBackspace = e => {
  var key = e.keyCode || e.charCode

  // magic numbers are backspace and delete. Naming them didn't work.
  if (key == 8 || key == 46) {
    setFilterText("")
    filterTree()
  }
}

【讨论】：