我正在使用一个对象数组递归地绘制一棵树。我能够调出具有所有展开/折叠相关功能的树。我在一定程度上实现了在树中搜索的搜索功能。如果匹配到leaf,我将显示扩展到该节点的所有节点。当中间或根节点被搜索,我应该显示,在折叠状态,然后可以展开
但是当我搜索第一级或中间父节点时,搜索给我proepr结果,但是当我试图打开它的子节点时,它是空的。此外,图标似乎是扩大时,我搜索任何家长。
例如,当我搜索Category1
时,树显示我Category1
与展开图标(这应该是折叠状态),当尝试展开它的空。当我搜索Applications
时,树显示了从类别1到应用程序的右层次结构,但是应用程序将处于展开状态,并且没有显示子对象。
有人能告诉我我做错了什么吗
沙盒:https://codesandbox.io/s/searching-c1m50i?file=/src/DrawnTree.jsx
代码我尝试到目前为止
import React, { useState } from "react";
import "./styles.css";
import { Node } from "./Node";
const DrawnTree = ({ treeData, currentActive, setCurrentActive }) => {
const [search, setSearch] = useState("");
const containsNodesWithTerm = (nodes, searchTerm) => {
const ids = [];
const _traverse = (nodes, searchTerm) => {
nodes.forEach((node) => {
if (node.name.toUpperCase().includes(searchTerm.toUpperCase())) {
ids.push(node.key);
}
if (node.nodes.length) {
_traverse(node.nodes, searchTerm);
}
});
};
_traverse(nodes, searchTerm);
return ids.length;
};
const filterNodes = (nodes, searchTerm = "") => {
const _filter = (nodes, searchTerm) => {
nodes.forEach((node) => {
if (
node.name.toUpperCase().includes(searchTerm.toUpperCase()) ||
containsNodesWithTerm(node.nodes, searchTerm)
) {
node.visible = true;
node.opened = true;
} else {
node.visible = false;
}
if (!searchTerm) {
node.opened = false;
}
if (node.nodes.length) {
_filter(node.nodes, searchTerm);
}
});
};
_filter(nodes, searchTerm);
return nodes;
};
const filteredTree = filterNodes(treeData, search);
return (
<div>
<input type="text" onChange={(e) => setSearch(e.target.value)} />
<div className="tree-list-section">
<div className="left-holder-bottom-list-section">
{filteredTree.map((node) => (
<Node
key={node.key}
node={node}
level={0}
currentActive={currentActive}
setCurrentActive={setCurrentActive}
/>
))}
</div>
</div>
</div>
);
};
export default DrawnTree;
import React, { useEffect, useState } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
export const Node = ({ node, level, currentActive, setCurrentActive }) => {
const { name, key, nodes, visible, opened } = node;
const [isOpen, setIsOpen] = useState(opened);
const hasChildren = !!node?.nodes?.length;
const nodeType = level === 0 ? "node" : !hasChildren ? "leaf" : "group";
const activeClassName = currentActive === name ? "active" : "";
useEffect(() => {
setIsOpen(opened);
}, [opened]);
if (!visible) {
return null;
}
return (
<>
<div
className={`list-row level-${level} ${nodeType} ${activeClassName}`}
onClick={() => {
setIsOpen((open) => !open);
if (!hasChildren) {
setCurrentActive((prevName) => (!(prevName === name) ? name : ""));
}
}}
key={key}
>
<div
className="list-item-holder"
style={{ paddingLeft: `${level === 0 ? "16" : 40 * level}px` }}
>
{hasChildren && (
<div className="list-item-expander-holder">
<span
className={`expand-collapse-icon ${
isOpen ? "collapse" : "expand"
}`}
>
<span className="expand-icon">
<FontAwesomeIcon icon="caret-down" />
</span>
<span className="collapse-icon">
<FontAwesomeIcon icon="caret-right" />
</span>
</span>
</div>
)}
<div className="list-item-details-holder">{name}</div>
</div>
</div>
{isOpen && hasChildren && (
<div className="list-row-children">
{nodes.map((node) => (
<Node
key={node.key}
node={node}
level={level + 1}
currentActive={currentActive}
setCurrentActive={setCurrentActive}
/>
))}
</div>
)}
</>
);
};
1条答案
按热度按时间hs1rzwqc1#
这是因为当你找到关键字时,你没有让孩子们知道他们的父母匹配关键字的状态。我修改了你的递归函数:
分叉沙盒: