React Material UI 树视图 - 在子节点 onNodeSelect 上获取根节点信息

Question

我有一个如下所示的树视图代码

    <TreeView
      defaultCollapseIcon={<ArrowCircleUpIcon />}
      defaultExpandIcon={<ArrowCircleDownIcon />}
      onNodeSelect={handleChange}
      sx={{ height: 240, flexGrow: 1, maxWidth: 400, overflowY: 'auto' }}
    >
      {loop(values)}
    </TreeView>

以及如下所示的 handleChange 方法

 const handleChange = async (event, node) => {
    console.log('nodeId: ', node)   
}

我的疑问是，在 handleChange 方法中，我使用节点参数获取 selected 节点信息。但我想要实现的是获得 selected 节点或整个父层次结构的父级就像 A 有子 B 节点一样，B 有子 C 节点。所以如果我 select C 我是否会得到所有的 A、B、C 节点信息。我是新手，请帮助我。

Answer 1

直接来自 MUI 文档：

event: The event source of the callback nodeIds: Ids of the selected nodes. When multiSelect is true this is an array of strings; when false (default) a string.

这意味着当 multiSelect 不正确时（您的场景），nodeIds 将仅包含所选节点的 ID。

您可以通过使用 nodeIds 中的 id 并在数组中查找它来获取 C 节点的整个层次结构。

[第二次编辑] 希望这会有所帮助：

import React, { useEffect, useState } from "react";
import TreeView from "@mui/lab/TreeView";
import TreeItem from "@mui/lab/TreeItem";

export const TreeViewFile = () => {
  const [selectedNode, setSelectedNode] = useState({});
  const [selectedRoot, setSelectedRoot] = useState({});

  useEffect(() => {
    // This will be called for each new value of selectedNode, including the initial empty one
    // Here is where you can make your API call
    console.log("selectedNode", selectedNode);
    console.log("selectedRoo", selectedRoot);
  }, [selectedNode, selectedRoot]);

  const handleChange = (event, nodeId) => {
    treeViewArr.forEach((treeRoot) => {
      if(treeRoot.id === nodeId){
        setSelectedRoot(treeRoot);
        setSelectedNode(treeRoot);
        return
      }

      handleSelectedNode(treeRoot.childNodes, treeRoot, nodeId);
    });
  };

  const handleSelectedNode = (childNodes, treeRoot, nodeId) => {
    if (!childNodes) {
      return;
    }

    for (let i = 0; i < childNodes.length; i++) {
      let childNode = childNodes[i];
      if (childNode.id === nodeId) {
        setSelectedRoot(treeRoot);
        setSelectedNode(childNode);
        return;
      }

      handleSelectedNode(childNode.childNodes || [], treeRoot, nodeId);
    }
  };

  const displayTreeView = (treeViewArray) => {
    if (!treeViewArray) {
      return null;
    }
    return treeViewArray.map((treeViewItem) => {
      return (
        <TreeItem
          key={treeViewItem.id}
          nodeId={`${treeViewItem.id}`}
          label={treeViewItem.title}
        >
          {displayTreeView(treeViewItem.childNodes)}
        </TreeItem>
      );
    });
  };

  return (
    <>
      This is the selectedNode: {selectedNode?.title}
      <TreeView
        onNodeSelect={handleChange}
        sx={{ height: 240, flexGrow: 1, maxWidth: 800, overflowY: "auto" }}
      >
        {displayTreeView(treeViewArr)}
      </TreeView>
    </>
  );
};

const treeViewArr = [
  {
    id: "1",
    title: "First Parent Node",
    childNodes: [
      {
        id: "2",
        parentId: "1",
        title: "First Child Node of First Parent Node",
        childNodes: [
          {
            id: "3",
            parentId: "2",
            title: "First Child Node of First Child Node",
          },
        ],
      },
      {
        id: "4",
        parentId: "1",
        title: "Second Child Node of First Parent Node",
        childNodes: [
          {
            id: "5",
            parentId: "4",
            title: "First Child Node of Second Child Node",
          },
        ],
      },
    ],
  },
  {
    id: "6",
    title: "Second Parent Node",
    childNodes: [
      {
        id: "7",
        parentId: "6",
        title: "First Child Node of Second Parent Node",
        childNodes: [
          {
            id: "8",
            parentId: "7",
            title: "First Child Node of First Child Node of Second Parent Node",
          },
        ],
      },
      {
        id: "9",
        parentId: "6",
        title: "Second Child Node",
        childNodes: [
          {
            id: "10",
            parentId: "9",
            title:
              "First Child Node of Second Child Node of Second Parent Node",
          },
        ],
      },
    ],
  },
];

React Material UI 树视图 - 在子节点 onNodeSelect 上获取根节点信息

React Material UI tree view - Getting root node info on child node onNodeSelect

node.js

reactjs

material-ui