React Antd Tree：获取所选节点的父 ID

Question

我正在使用 Tree of antd，我希望能够 console.log selected 节点的父节点。这是一个例子：

当我 select 叶子例如：我想得到

parent 1-0

控制台中的id

this is my sample code，如果您有任何想法，请:) 谢谢

Answer 1

我从antd的“可搜索”示例中得到了这段代码。

const getParentKey = (key, tree) => {
  let parentKey;
  for (let i = 0; i < tree.length; i++) {
    const node = tree[i];
    if (node.children) {
      if (node.children.some(item => item.key === key)) {
        parentKey = node.key;
      } else if (getParentKey(key, node.children)) {
        parentKey = getParentKey(key, node.children);
      }
    }
  }
  return parentKey;
};

该函数接受 child 的键和树数据，然后 returns parent 的键。既然你想获得 parent 的标题，你可以稍微调整一下并在你的代码中使用它，就像这样

const getParentTitle = (key, tree) => {
  let parentTitle;
  for (let i = 0; i < tree.length; i++) {
    const node = tree[i];
    if (node.children) {
      if (node.children.some(item => item.key === key)) {
        parentTitle = node.title;
      } else if (getParentTitle(key, node.children)) {
        parentTitle = getParentTitle(key, node.children);
      }
    }
  }
  return parentTitle;
}

const Demo = () => {
  const onSelect = (selectedKeys, info) => {
    console.log('selected', selectedKeys, info);
    console.log(getParentTitle(selectedKeys[0], treeData))
};

  const onCheck = (checkedKeys, info) => {
    console.log('onCheck', checkedKeys, info);
  };

  return (
    <Tree
      checkable
      defaultExpandedKeys={['0-0-0', '0-0-1']}
      defaultSelectedKeys={['0-0-0', '0-0-1']}
      defaultCheckedKeys={['0-0-0', '0-0-1']}
      onSelect={onSelect}
      onCheck={onCheck}
      treeData={treeData}
    />
  );
};

或者您甚至可以通过获取整个 parent 节点 object 来扩大规模，然后有选择地选择您要使用的属性

const getParentNode = (key, tree) => {
  let parentNode;
  for (let i = 0; i < tree.length; i++) {
    const node = tree[i];
    if (node.children) {
      if (node.children.some(item => item.key === key)) {
        parentNode = node;
      } else if (getParentNode(key, node.children)) {
        parentNode = getParentNode (key, node.children);
      }
    }
  }
  return parentNode;
}

const Demo = () => {
  const onSelect = (selectedKeys, info) => {
    console.log('selected', selectedKeys, info);
    let parentNode = getParentNode(selectedKeys[0], treeData)
    console.log(parentNode.key, parentNode.title)
  };
  ...

如果 console.log 你可以看到节点的完整形状 object

我使用 antd 的一个经验是他们的文档没有最好的解释所以有时你必须通过大量的例子才能完全理解 antd API

React Antd Tree：获取所选节点的父 ID

React Antd Tree : get parent ID of selected Node

reactjs

antd