请问如何进行antd的组件的内部的修改进而二次开发它,修改antd/tree内部的代码给item添加点击事件?

在参考antd/tree的时候,
我想要关闭checkableselectable,然后想要有点击的功能。
但是我看文档是没有这个功能的。

1、所以很想基于antd/tree进行二次封装做到可点击。
请问有什么可以指导一下可以做到此需求呢?

2、因为我看组件是这样,不知怎么修改内部内容

<DirectoryTree
      className={styles.customAntTreeSwitcher}
      multiple
      defaultExpandAll
      onSelect={onSelect}
      onExpand={onExpand}
      treeData={props.data}
    />

如何才能做到修改antd/tree内部的代码给每个item添加点击事件呢。

传输的数据都是如下:

const treeData: DataNode[] = [
  {
    title: 'test-01',
    key: '0-0',
    children: [
      { title: 'test001', key: '0-0-0', isLeaf: true, selectable: false },
      { title: 'test002', key: '0-0-1', isLeaf: true, selectable: false },
      { title: 'test003', key: '0-0-2', isLeaf: true, selectable: false },
    ],
    selectable: false,
    icon: false,
  },
  {
    title: 'test-02',
    key: '0-1',
    children: [
      { title: 'test004', key: '0-1-0', isLeaf: true, selectable: false },
      { title: 'test005', key: '0-1-1', isLeaf: true, selectable: false },
    ],
    selectable: false,
    icon: false
  },
];

不知道如何进行二次开发请各位老师指导一下呢。

阅读 738
4 个回答
import React from 'react';
import { Tree } from 'antd';

const { DirectoryTree } = Tree;

const treeData = [
  {
    title: <div onClick={() => handleClick('0-0')}>test-01</div>,
    key: '0-0',
    children: [
      { title: <div onClick={() => handleClick('0-0-0')}>test001</div>, key: '0-0-0', isLeaf: true },
      { title: <div onClick={() => handleClick('0-0-1')}>test002</div>, key: '0-0-1', isLeaf: true },
      { title: <div onClick={() => handleClick('0-0-2')}>test003</div>, key: '0-0-2', isLeaf: true },
    ],
  },
  {
    title: <div onClick={() => handleClick('0-1')}>test-02</div>,
    key: '0-1',
    children: [
      { title: <div onClick={() => handleClick('0-1-0')}>test004</div>, key: '0-1-0', isLeaf: true },
      { title: <div onClick={() => handleClick('0-1-1')}>test005</div>, key: '0-1-1', isLeaf: true },
    ],
  },
];

function handleClick(key) {
  console.log('Item clicked:', key);
}

const MyTree = () => {
  return (
    <DirectoryTree
      multiple
      defaultExpandAll
      treeData={treeData}
    />
  );
};

export default MyTree;

你如果只是想要点击事件 直接添加即可

 <Tree.DirectoryTree
      multiple
      defaultExpandAll
      onSelect={()=>{ }}
      checkable={false}
      selectable={false}
      onClick={(event)=>{
        console.log('点击事件event',event, event.target);
      }}
      treeData={treeData}
    />
新手上路,请多包涵

是的,@白水 的方法就行,自己 render 出来,在 render 节点上添加你需要的事件就行了 ~

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏