React + antd 可编辑下拉树

以下是一个简化的React组件示例，使用Ant Design的TreeSelect组件来创建一个可编辑的下拉树。

import React, { useState } from 'react';
import { TreeSelect } from 'antd';
import { TreeNode } from 'antd/lib/tree-select';
 
interface TreeSelectProps {
  treeData: TreeNode[];
}
 
const EditableTreeSelect: React.FC<TreeSelectProps> = ({ treeData }) => {
  const [value, setValue] = useState<string>('');
 
  const onChange = (newValue: string) => {
    setValue(newValue);
  };
 
  return (
    <TreeSelect
      value={value}
      treeData={treeData}
      placeholder="请选择"
      onChange={onChange}
      treeDefaultExpandAll
    />
  );
};
 
export default EditableTreeSelect;

在这个例子中，treeData是一个树形结构的数组，每个元素都是一个TreeNode对象。TreeSelect组件的value属性绑定了组件的当前值，onChange事件处理函数用于更新这个值。

使用该组件时，你需要提供一个树形结构的数据数组，如下所示：

const treeData = [
  {
    title: 'Node1',
    value: '0-0',
    children: [
      {
        title: 'Child Node1',
        value: '0-0-1',
      },
      {
        title: 'Child Node2',
        value: '0-0-2',
      },
    ],
  },
  // ... 更多树节点
];
 
const App = () => {
  return <EditableTreeSelect treeData={treeData} />;
};

这个简单的组件提供了一个可编辑的下拉树，用户可以选择一个节点或创建新的节点（如果TreeSelect允许输入的话）。