react 自定义鼠标右键点击事件

功能:鼠标右键点击节点时,出现"复制"功能,点击其他部位,隐藏"复制";鼠标右键事件的文案,始终在鼠标点击位置的右下方;点击复制,提示复制成功

效果图:

代码:

复制代码
const [showRight,setShowRight] = useState(false);
const contextMenu = useRef(null); 
const [clickX,setClickX] = useState('0px');
const [clickY,setClickY] = useState('0px');

------------

<div className='topology-node' onContextMenu={(e)=> handleRight(e)} >
	这里面是图中的节点,只有右键双击图中节点,才会触发自定义的右键事件功能
</div>

------------

// 鼠标右键展示的内容,注意这里的样式rightStyle,鼠标右键时菜单的位置(图中"复制"的位置)就是靠这个样式控制的
{showRight&&<div className='right-panel' onClick={handleRightCopy} style={rightStyle}>复制</div>}

------------

useEffect(()=>{
	// 监听其他地方的点击事件
    document.addEventListener('click', _handleClick);
})

------------

// 事件
const handleRight =(event:any) =>{
    setShowRight(true)
    // event.clientX event.clientY 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标)
    setClickX(event.clientX);  
    setClickY(event.clientY);
}
// 右键菜单的位置,加减多少看自己,位置看着舒服就行
const rightStyle = {
    left:`${clickX + 5}px`,
    top: `${clickY + 5}px`
}
const _handleClick =(event:any)=>{
    const wasOutside = !(event.target.contains === contextMenu);
    // 点击其他位置需要隐藏右键菜单
    if (wasOutside) setShowRight(false);
}
const handleRightCopy =()=>{
    console.log('点击了复制');
    message.success('复制成功')
}

css

复制代码
// 样式可以自定义
.right-panel{
  width: 100px;
  z-index:10;
  position: fixed;
  background-color: pink;
  cursor: pointer;
}
相关推荐
知识分享小能手15 分钟前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
虫虫rankourin4 小时前
在 create-react-app (CRA) 创建的应用中使用 react-router-dom v7以及懒加载的使用方法
前端·react.js
开心不就得了4 小时前
React 状态管理
react.js·typescript
天天进步20155 小时前
掌握React状态管理:Redux Toolkit vs Zustand vs Context API
linux·运维·react.js
冷冷的菜哥5 小时前
react实现无缝轮播组件
前端·react.js·typescript·前端框架·无缝轮播
用户7678797737326 小时前
后端转全栈之Next.js文件约定
react.js·next.js
却尘8 小时前
React useMemo 依赖陷阱:组件重挂载,状态无限复原
前端·javascript·react.js
遂心_12 小时前
React useState:20分钟彻底掌握这个让你"状态满满"的Hook
前端·javascript·react.js
江城开朗的豌豆14 小时前
Axios拦截器:给你的请求加上"双保险"!
前端·javascript·react.js
江城开朗的豌豆14 小时前
解密DVA:React应用的状态管理利器
前端·javascript·react.js