React CheckboxTree滤波器

Question

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

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

• 我的第一个问题是，当我搜索父程序时，由于某种原因，我只能得到数组的最后一个子元素。

• 第二个是，当我使用backspace按钮时，过滤器停止工作，直到我清理每一个字符。

。

我制作了一个密码箱来帮助你们理解问题：https://codesandbox.io/s/checkboxtree-6gu60

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

Tks提前！

Answer 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()
  }
}