如何查找添加的项目，并在树视图中单击该项目以编辑特定项目

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

const { TreeNode } = Tree;

const MyTreeView = ({ data }) => {
  const [expandedKeys, setExpandedKeys] = useState([]);
  const [selectedKey, setSelectedKey] = useState(null);
  const [editedValue, setEditedValue] = useState('');

  const onSelect = (keys, event) => {
    setSelectedKey(keys[0]);
  };

  const onExpand = (keys) => {
    setExpandedKeys(keys);
  };

  const renderTreeNodes = (data) =>
    data.map((item) => {
      if (item.children) {
        return (
          <TreeNode title={item.title} key={item.key}>
            {renderTreeNodes(item.children)}
          </TreeNode>
        );
      }
      return <TreeNode title={item.title} key={item.key} />;
    });

  const handleEdit = () => {
    // 这里可以添加编辑逻辑，例如更新数据源
    console.log('Editing item:', selectedKey, editedValue);
  };

  return (
    <div>
      <Tree
        onSelect={onSelect}
        onExpand={onExpand}
        expandedKeys={expandedKeys}
      >
        {renderTreeNodes(data)}
      </Tree>
      {selectedKey && (
        <div>
          <input
            type="text"
            value={editedValue}
            onChange={(e) => setEditedValue(e.target.value)}
          />
          <button onClick={handleEdit}>保存</button>
        </div>
      )}
    </div>
  );
};

export default MyTreeView;