0

TreeView在 ReactJS 中有一个材质 UI。我正在实现父单击,这是标签单击,当单击标签时,我正在使用数组索引调用 API POST 并将其传递给选定的项目。

如果有一些 API 响应以数组的形式出现,我想向孩子展示,以将其附加到孩子的父母TreeView

<TreeView
  className={classes.root1}
  defaultExpandIcon={<ArrowDropDownIcon />}
  defaultCollapseIcon={<ArrowDropUpIcon />}
  defaultEndIcon={<ArrowDropDownIcon />}
  children={treeViewChildren}
>
  {renderTree(row, index)}
</TreeView>;

而 renderTree 函数是:

const renderTree = (domainListOrganizationalUnitsitems, row) => (
  <StyledTreeItem
    style={{ padding: "3px", marginLeft: 18 }}
    onLabelClick={() =>
      handleListItemOrgClick(domainListOrganizationalUnitsitems, row)
    }
    key={domainListOrganizationalUnitsitems.organizationalUnitId}
    nodeId={domainListOrganizationalUnitsitems.organizationalUnitId}
    labelText={domainListOrganizationalUnitsitems.organizationalUnitName}
    labelIcon={AccountTree}
  >
    {Array.isArray(domainListOrganizationalUnitsitems.domainGroupList)
      ? domainListOrganizationalUnitsitems[row].domainGroupList.map((node) =>
          renderTree(node)
        )
      : null}
  </StyledTreeItem>
);

而item onLabelClick 是handleListItemOrgClick 函数是:

const handleListItemOrgClick = (event, index) => {

  setselectedOrganizationdata([
    ...new Set([...selectedOrganizationdata, index]),
  ]);

  var expanded = JSON.stringify({
    option: "GetSubObjectList",
    distinguishedUserName:
      domainListOrganizationalUnitsitems[index]
        .organizationalUnitDistinguishName,
  });
  const result = ApiService(expanded);
  //---------->Groups Lists<----------------
  result
    .then((response) => {
      const item = response.domainGroupList;
      // setdomainListGroupItems(item);
      setTreeViewChildren(item);
      console.log(item);

      // setTagData(item)
      // console.log(tagData, "haiiii")
    })
    .catch((error) => {
      console.log(error);
    });
  setVisible(true);
  setselectedOrganization(event.target);
};

我在 API POST 请求中得到数组响应。但我不知道在所选标签单击的父级中显示它。

怎么做?有什么办法吗??

4

0 回答 0