技术标签: 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;
文章浏览阅读2.6k次。转:点击打开链接_ios memory pressure notification
文章浏览阅读5.3k次。荆轲刺秦王一些主要命令:登陆:mysql -u username -p 一般都是:mysql -u root -p 也可以:mysql -uroot -p显示全部的数据库:show databases;使用某一个数据库:use databasename; _linux下如何删除mysql用户
文章浏览阅读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
文章浏览阅读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]}总是提示最后一页
文章浏览阅读80次。压缩打包介绍 2、gzip压缩工具 yum install -y unzip tar打包后,原文件不会消失,依旧存在。 ...
文章浏览阅读1.3k次。《Linxu高性能服务器编程》阅读笔记:1. TCP服务端连接的状态转移 (1) 服务器调用listen()系统调用进入LISTEN(监听)状态,被动等待客户端连接。 (2) 服务端一旦监听到某个连接请求(收到同步报文段),就将该连接放入内核等待队列中,并向客户端发送带有SYN标志的确认报文段,此时服务端进入SYN_RCVD状态。 (3) 如果服务端成功接收到客户端发送回的确认报文段,就转移至_在tcpip建立连接过程中,客户端或服务端的状态转移
文章浏览阅读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
文章浏览阅读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双系统误删磁盘
文章浏览阅读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对应版本
文章浏览阅读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
文章浏览阅读779次。首先感谢我同事,参考他的博客,我才完成了我的nodejs博客的配置。nodejs运行之后,关掉链接,网站运行就会断开,需要安装forever,后台执行。安装方法如下(在windows和Linux下都能运行)://forever的安装:npm install forever -g//使用forever启动守护进程:forever start your_app.js//关闭守护进程:forever s..._node.js配置nginx
文章浏览阅读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后 怎么用