AntD Tree右键菜单-react-contexify-程序员宅基地

技术标签: React_AntD  react.js  前端  javascript  

https://www.npmjs.com/package/react-contexify

 npm i react-contexify

 使用版本:5.0.0

说明:5.0.0版本中没有MenuProvider,网上很多方案有MenuProvider是react-contexify老版本。

 比如参考:https://github.com/ant-design/ant-design/issues/5151

简单Demo

import React from 'react';

import { Menu, Item, useContextMenu } from 'react-contexify';
import 'react-contexify/dist/ReactContexify.css';

const Demo: React.FC = () => {
    const MENU_ID = 'rightMenu';
    const { show } = useContextMenu({
        id: MENU_ID,
    });

    return (
        <div id="Index">
            <div style={
   { width: '100px', height: '100px' }} onContextMenu={show}>
            </div>
            <Menu id={MENU_ID} animation="fade">
                <Item>右键点击效果</Item>
            </Menu>
        </div >
    );
}

export default Demo;

树组件结合右键菜单,直接上代码,用any省时间,自行优化。

// components/TreeRight.tsx

import { Tree } from 'antd';
import { Menu, Item, useContextMenu } from 'react-contexify';
import 'react-contexify/dist/ReactContexify.min.css';

type TreeRightProps = {
  dataSource: any[];
  contextMenu: any;
  onSelect: (selectedKeys: any, info: any ) => void;
};

// const MENU_ID = '1';
const TreeRight: React.FC<TreeRightProps> = (props) => {
  const { dataSource, contextMenu, onSelect} = props;
  // 右键菜单
  const ContextMenu = () => (
    <Menu id={contextMenu.menuId}>
      {contextMenu.items.map((item: any) => (
      	// 这里需要加key,不然要报错
        <Item key={item.key} onClick={item.handler}>{item.name}</Item>
      ))}
    </Menu>
  );

  const { show } = useContextMenu({
    id: contextMenu.menuId,
  });

  // 右键显示菜单
  const handleContextMenu = (event: any, node: any) => {
    event.preventDefault();
    show(event,{
      props: node,
    });
  }
  return (
    <div>
      <Tree
        autoExpandParent
        defaultExpandAll
        defaultExpandParent
        treeData={dataSource}
        onSelect={onSelect}
        // 右键事件
        onRightClick={({event, node}: any) => {
          handleContextMenu(event, node)
      }}
      />
      <ContextMenu />
    </div>
  );
};

export default TreeRight;
// index.tsx

import React, { useState } from 'react';
import 'react-contexify/dist/ReactContexify.min.css';
import { PageContainer } from '@ant-design/pro-layout';
import ProCard from '@ant-design/pro-card';
import TreeRight from './components/TreeRight';

const treeData = [
  {
    key: 1,
    id: 1,
    title: '中国',
    children: [
      {
        id: 2,
        key: 2,
        title: '广东',
        children: [
          {
            id: 5,
            key: 5,
            title: '深圳',
            children: []
          },
          {
            id: 6,
            key: 6,
            title: '广州',
            children: []
          }
        ]
      },
      {
        id: 3,
        key: 3,
        title: '湖北',
        children: [
          {
            id: 7,
            key: 7,
            title: '武汉',
            children: []
          }
        ]
      }
    ]
  }
];

const Index: React.FC = () => {
  const [title, setTitle] = useState<string>('');
  // 点击树节点
  const handleSelect = (selectedKeys: any, info: any) => {
    console.log(selectedKeys, info);
    const txt: string = info.selectedNodes[0]?.title
    setTitle(txt)
    console.log(info.selectedNodes[0]?.title)
  };
  // 右键菜单点击事件,props里就是节点数据
  const handleItemClick = (type: any, item: any) => {
    console.log('右键菜单点击-key')
    console.log(type)
    console.log('右键菜单点击-item')
    console.log(item.props)
  };
  const treeRightMenu = {
    menuId: '1',
    items: [
      { key: 'add', name: '添加同级节点', handler: (props: any) => { handleItemClick('add', props)}},
      { key: 'edit', name: '修改此节点', handler: (props: any) => { handleItemClick('edit', props)}},
      { key: 'addSub', name: '添加子节点', handler: (props: any) => { handleItemClick('addSub', props)}},
      { key: 'del', name: '添加此节点', handler: (props: any) => { handleItemClick('del', props)}},
    ],
  };
  return (
    <>
      <PageContainer breadcrumbRender={false}>
        <ProCard split="vertical">
          <ProCard title="左侧-分栏" colSpan="30%">
            <TreeRight
              dataSource={treeData}
              contextMenu={treeRightMenu}
              onSelect={handleSelect}
            />
          </ProCard>
          <ProCard title="右侧-分栏" headerBordered>
            右侧内容:选中<span style={
   {color:'#ff0000',fontWeight: 'bold'}}> {title} </span>
          </ProCard>
        </ProCard>
      </PageContainer>
    </>
  );
};

export default Index;

 

 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/u010730458/article/details/122062461

智能推荐

IOS ARC内存管理,提高效率避免内存泄露_ios memory pressure notification-程序员宅基地

文章浏览阅读2.6k次。转:点击打开链接_ios memory pressure notification

Linux mysql添加用户,删除用户,以及用户权限_linux下如何删除mysql用户-程序员宅基地

文章浏览阅读5.3k次。荆轲刺秦王一些主要命令:登陆:mysql -u username -p 一般都是:mysql -u root -p 也可以:mysql -uroot -p显示全部的数据库:show databases;使用某一个数据库:use databasename; _linux下如何删除mysql用户

ByteUtil字节工具类_byteutils-程序员宅基地

文章浏览阅读1.4k次。package com.tonglei.util;import java.io.IOException;import java.math.BigInteger;import java.net.Socket;import java.util.ArrayList;import java.util.Arrays;import java.util.HashMap;import java.util.Iterator;import java.util.List;import java.util.Ma_byteutils

PHPcms需要用到-程序员宅基地

文章浏览阅读440次。1.每个页面开头都需要添加的四句代码。 <title>{if isset($SEO['title']) && !empty($SEO['title'])}{$SEO['title']}{/if}{$SEO['site_title']}</title> <meta name="keywords" content="{..._phpcms{$next_page[title]}总是提示最后一页

2018-10-31 第7课 直播笔记-程序员宅基地

文章浏览阅读80次。压缩打包介绍 2、gzip压缩工具 yum install -y unzip tar打包后,原文件不会消失,依旧存在。 ...

TCP协议--TCP连接的状态转移_在tcpip建立连接过程中,客户端或服务端的状态转移-程序员宅基地

文章浏览阅读1.3k次。《Linxu高性能服务器编程》阅读笔记:1. TCP服务端连接的状态转移  (1) 服务器调用listen()系统调用进入LISTEN(监听)状态,被动等待客户端连接。  (2) 服务端一旦监听到某个连接请求(收到同步报文段),就将该连接放入内核等待队列中,并向客户端发送带有SYN标志的确认报文段,此时服务端进入SYN_RCVD状态。  (3) 如果服务端成功接收到客户端发送回的确认报文段,就转移至_在tcpip建立连接过程中,客户端或服务端的状态转移

随便推点

npm install报gyp info it worked if it ends with ok-程序员宅基地

文章浏览阅读4w次,点赞8次,收藏16次。npm install报gyp info it worked if it ends with ok查找没有头绪,顺着报错往前翻发现node scripts/install.js Cannot download "https://github.com/sass/node-sass/releases/download/v4.13.0/win32-x64-83_binding.node"应该是安装node-sass报错了看着很正常的下载链接却怎么也下载不下来原版链接和淘宝镜像上都没有这个文_gyp info it worked if it ends with ok

ubuntu+win 双系统 误删分区 修复grub_ubuntu双系统误删磁盘-程序员宅基地

文章浏览阅读689次。背景:ubuntu18.04 +win10先装的win10 后装的ubuntu。起因:固态硬盘,windows 做了三个分区,CDE。后来嫌弃DE盘没啥用,干脆合并了。之后重启电脑就出现了grub secue解决办法:1. 先使用 ls 命令 查看有多少 分区2. 逐个使用 ls <分区>/boot/grub 查看有无grub配置grub rescue> ls 结果示例# (hd0) , (hd0,m..._ubuntu双系统误删磁盘

RabbitMQ——RabbitMQ搭建及问题_erlang与rabbitmq对应版本-程序员宅基地

文章浏览阅读2.5k次,点赞4次,收藏6次。单点准备版本确定官方给出的RabbitMQ和Erlang对应版本RabbitMQ版本Erlang最低版本Erlang最高版本3.7.1520.3.x22.0.x3.7.14、3.7.13、3.7.12、3.7.113.7.10、3.7.9、3.7.8、3.7.720.3.x21.3.x3.7.6、3.7.5、3.7.4、3.7.33.7.2、3.7..._erlang与rabbitmq对应版本

BlockingQueue常用方法add、off、put、take、poll使用说明_blockingqueue take poll-程序员宅基地

文章浏览阅读4.9k次。1.BlockingQueue的定义首先将BlockingQueue提供的方法的含义解释如下:import java.util.Collection;import java.util.Queue;import java.util.concurrent.TimeUnit;public interface BlockingQueue<E> extends Queue<E> { /** * 1.在不违反容量限制的情况下将指定元素插入队列,成功则立即返回true_blockingqueue take poll

nginx nodejs环境配置_nodejs博客的nginx配置-程序员宅基地

文章浏览阅读779次。首先感谢我同事,参考他的博客,我才完成了我的nodejs博客的配置。nodejs运行之后,关掉链接,网站运行就会断开,需要安装forever,后台执行。安装方法如下(在windows和Linux下都能运行)://forever的安装:npm install forever -g//使用forever启动守护进程:forever start your_app.js//关闭守护进程:forever s..._node.js配置nginx

Linux 下 使用 yum 安装 mysql 的详细步骤及其使用过程_linux用yum安装完mysql后 怎么用-程序员宅基地

文章浏览阅读445次。此文章转载于 http://winteragain.blog.51cto.com/1436066/1147962用yum安装MySql打入如下命令:[root@mysql ~]# yum -y install mysql-server //自动从网上搜索资源并自动下载安装[root@mysql ~]# chkconfig mysqld on //设置开机_linux用yum安装完mysql后 怎么用

推荐文章

热门文章

相关标签