antd TreeSelect 组件如何获取父级ID

在 Ant Design 的 TreeSelect 组件中，当选择子节点时获取其父节点的 ID，你需要利用 TreeSelect 组件提供的数据和事件回调。通常TreeSelect 的数据以树形结构存储，每个节点都有一个唯一的 key（或 value）和一个指向其父节点的引用。

以下是一个基本的实现方法：

1. 准备数据：确保每个节点数据中包含对其父节点的引用。例如，你可以在每个节点对象中添加一个 parentId 字段。

2. 处理选择事件：在 TreeSelect 的 onChange 或 onSelect 事件回调中，你可以根据选中的节点的 value 查找其对应的父节点 ID。

下面是一个简化的示例代码：

import React, { useState } from 'react';
import { TreeSelect } from 'antd';

const App = () => {
  const [value, setValue] = useState(undefined);

  const treeData = [
    {
      title: 'Parent 1',
      value: 'parent1',
      children: [
        {
          title: 'Child 1-1',
          value: 'child1-1',
          parentId: 'parent1',
        },
        {
          title: 'Child 1-2',
          value: 'child1-2',
          parentId: 'parent1',
        },
      ],
    },
    // 更多节点...
  ];

  const onChange = (value, label, extra) => {
    setValue(value);
    const nodeData = extra.triggerNode ? extra.triggerNode.props : null;
    const parentId = nodeData ? nodeData.parentId : null;

    console.log('选中值:', value);
    console.log('父节点ID:', parentId);
    // 这里可以执行更多的逻辑
  };

  return (
    <TreeSelect
      style={{ width: '100%' }}
      value={value}
      dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
      treeData={treeData}
      placeholder="Please select"
      treeDefaultExpandAll
      onChange={onChange}
    />
  );
};

export default App;

在这个例子中：

• 我们为 TreeSelect 组件提供了一个带有 parentId 属性的树形数据结构。
• 在 onChange 事件中，我们通过 extra.triggerNode 获取触发选择事件的节点，并进一步获取其 parentId。

请根据你的实际数据结构和需求调整此代码。如果你的树形数据没有包含父节点的引用，你可能需要先处理原始数据以构建这种关系。