用纯React写右键菜单真麻烦,最后还是得用DOM操作

最新推荐文章于 2024-06-24 15:16:38 发布
最新推荐文章于 2024-06-24 15:16:38 发布
阅读量7.5k 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gogcc/article/details/52547136
版权
本文探讨了在React中创建右键菜单所面临的复杂性，包括位置调整、事件处理、子菜单设计等问题。作者分享了一个使用DOM操作解决这些问题的Demo，通过在ContextMenu组件内绑定DOM元素，并在事件处理中传递源元素信息，实现了数据和UI的同步。详细代码可在GitHub上的项目找到。
摘要由CSDN通过智能技术生成

用react操作右键菜单

右键菜单是很复杂的

1,弹出菜单--位置要随时变化
2,弹出层要正确处理各种鼠标事件
3,子菜单设计也很复杂
4,图标+菜单内部按钮难以加入
5,双重事件难以获取事件源(右键事件-->右键事件)
6,数据+UI如何同步(更新DOM元素以后更新后台数据)

想了好久以后终于出了个demo

原理:

<ContexeMenu >

   <MenuItem onClick=callback>删除</MenuItem>

<ContexeMenu/>

在ContextMenu内部自动用上级绑定DOM元素,

最低0.47元/天 解锁文章
goas
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js各种右键菜单控件
03-10
各种js右键菜单控件，可以与任意的服务器端控件或者客户端控件结合使用，使用方便！
react实现的弹窗组件，鼠标移入弹出的菜单，菜单保持弹出状态
just_do_it_123的博客
04-14 2444
最近打算模仿在线ps实现一个手稿上色的单页面应用，需要实现鼠标移入button弹出菜单，移出button菜单消失，鼠标移入菜单，菜单保持弹出的状态。一开始是想把弹出的菜单用absolute定位，然后将left置为button的范围内，这样可以实现效果，但是不美观，弹出的菜单很有可能会覆盖部分button。查阅了网上的方法：当鼠标移出button时，使用setTimeout设置菜单延时消失，当鼠标移...
React：tabs或标签页自定义右击菜单内容，支持内嵌iframe关闭菜单方案
最新发布
刻痕
06-24 439
## React：tabs或标签页自定义右击菜单内容，支持内嵌iframe关闭菜单方案 不管是react、vue还是原生js，原理是一样的 ## 场景 前端自定义标签页，一个标签对应一个路由页面，通过切换标签快速切换不同应用或者页面 ## 代码 #### 变量 ```javascript state = { contextMenuIndex: '', // 右击菜单索引 contextMenuPosition: { // 右击菜单定位信息 clientX: '',
react 自定义鼠标右键点击事件
wang_59881的博客
06-18 570
鼠标右键点击节点时，出现“复制”功能，点击其他部位，隐藏“复制”；鼠标右键事件的文案，始终在鼠标点击位置的右下方；点击复制，提示复制成功。
menu:React菜单
03-30
rc菜单 React菜单组件。 来自端口 安装 用法 import Menu , { SubMenu , MenuItem } from 'rc-menu' ; ReactDOM . render ( < Menu> < MenuItem> 1 < / MenuItem > < SubMenu xss=removed> < MenuItem> 2-1 < / MenuItem > < / SubMenu > < / Menu > , container , ) ; 兼容性 IE浏览器/边缘 火狐浏览器 Chrome合金 苹果浏览器 电子 IE11，Edge 最近2个版本 最近2个版本 最近2个版本 最近2个版本 原料药 菜单道具 姓名 类型 默认 描述 班级名称 细绳 根dom节点的其他CSS类 模式 细绳 垂直的 [“水
【react + design】创建右键菜单
m0_53584457的博客
06-28 1338
右键菜单，直接上代码; design 树控件右键出现菜单
react中鼠标右击展示自定义菜单栏
weixin_45226867的博客
11-26 2471
首先在元素中定义一个右击事件,注意在react中用refs来定义样式，这样不会因元素渲染而导致菜单栏展示延迟过长： render(){ return( <div> <button onMouseUp={this.rigClick}>右击展示自定义菜单栏</button> <div ref="menu" style={{ position: "absolute", width: 100, height: 200,display:"none"}
react自定义鼠标右键菜单，跟随鼠标右键位置展示
muge1161105403的博客
01-05 3401
我的练习项目用的是ant design pro，直接上代码 项目demo地址 点我打开 import React, { useState, useRef, useEffect } from 'react'; import { message } from 'antd'; import styles from './index.less'; const Index = () => { const [visible, setVisible] = useState<boolean>(fals
React+ant design 实现右键菜单 Tree 配合 Dropdown
foolcuntry的博客
06-25 4186
React+ant design 实现右键菜单 需求：页面内部创建一个左侧目录树，并实现右键菜单功能经过对比，决定使用 Tree 创建目录树，Dropdown 实现菜单功能虽然 Tree 有 onRightClick 方法可以进行右键菜单的设置，但是右键之后的处理觉得麻烦 发现 Dropdown 也可以右键触发，于是想通过自定义Tree 目录树的节点进行实现，这样每一个几点都是一个通过右键触发的下拉菜单，于是便达到了简便右键菜单的功能 具体代码 import React from 'react' const
react 树形菜单_echarts tree【树形列表，右键出现菜单】
weixin_39693437的博客
02-04 468
import React, { PureComponent } from 'react';import { findDOMNode }from 'react-dom';import momentfrom 'moment';import { Link }from 'react-router-dom';import { connect }from 'dva';import { Row, Col, Ta...
use-context-menu:useContextMenu是一个React钩子，用于无缝创建自定义上下文菜单！
05-13
React使用上下文菜单 一个React钩子，可轻松创建自定义上下文菜单！ 挂钩负责逻辑并创建a11y属性，而您则负责UI！ 目录 安装 该模块通过与捆绑在一起的分发，应作为项目的dependencies之一安装： npm install --...
react➕antd【树形列表，右键出现菜单】
xiaohong的博客
05-22 4922
1，列表上右键事件 treeNodeonRightClick，代码中有 2，自定义右键菜单内容 getNodeTreeRightClickMenu，代码中有 3，return下面写入右键菜单内容 {this.getNodeTreeRightClickMenu()} 4，效果图 5，详细代码 import React, { PureComponent } from 'react'...
electron菜单和右键菜单设置
weixin_46742047的博客
06-04 934
electron菜单和右键菜单设置
创建 React 上下文菜单
分享身边生活经验blog
09-07 799
上下文菜单（也称为右键单击菜单）是在用户交互（如右键单击鼠标操作）上显示的图形用户界面 （GUI） 菜单。如何在Android上录制WhatsApp视频和语音通话？上下文菜单提供一组有限的选项，这些选项在菜单所属的操作系统或应用程序的当前状态或上下文中可用。首先，我们将在文件夹中创建一个文件，并使用我们将用于项目的数据填充该文件：data.js``data​id: 1,},id: 2,},id: 3,},id: 4,},
【React】使用react-joyride开发引导功能
郭昊的博客
05-18 2174
【代码】【React】使用react-joyride开发引导功能。
React实例之完善布局菜单（二）
zxmatline的博客
02-04 1369
我们继续未完的课程。我们已经设计完所有theme的有关逻辑和代码了。接下来就是菜单部分，首先，菜单分为菜单头和菜单列表，还有收缩模式和缩略模式。为配置能用化的考虑，我们在菜单配置方面采用了Json数组。而菜单本身的数据状态和App的业务逻辑是没有关联的。所以我们尽可能的把两者隔离开。组件间的状态共享一般通过 Props 、state、 及Reducer 这么种方式。对于单层状态的上下传递我们采用 Props 和 state 就可以，但对于多层级的状传递这种方式就很不合适了。
react自定义右键事件
weixin_39818813的博客
05-12 2649
右键显示弹窗 const handleContextMenu = (e) => { e.preventDefault() // 此条件下才展示弹窗 if (e.target.nodeName === "DIV" && e.target.innerText !== "首页") { const x = e.clientX const y = e.clientY // 弹窗节点 const rightMenu = d
react electron关闭托盘逻辑代码
03-26
以下是React Electron关闭托盘逻辑代码的示例： ```javascript import { app, Tray, Menu } from 'electron'; import path from 'path'; import React, { useState, useEffect } from 'react'; import { render } from 'react-dom'; const App = () => { const [tray, setTray] = useState(null); useEffect(() => { const iconPath = path.join(__dirname, 'icon.png'); const newTray = new Tray(iconPath); const contextMenu = Menu.buildFromTemplate([ { label: 'Close', type: 'normal', click: closeApp }, ]); newTray.setContextMenu(contextMenu); setTray(newTray); return () => { newTray.destroy(); }; }, []); const closeApp = () => { app.quit(); }; return null; }; render(<App />, document.getElementById('root')); app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit(); } }); app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow(); } }); ``` 上面的代码在应用程序启动时创建了一个托盘，并将其设置为应用程序图标。当用户右键单击托盘图标时，将显示一个菜单，其中包含“关闭”选项。用户单击“关闭”选项时，应用程序将退出。在应用程序退出之前，需要调用`tray.destroy()`方法来销毁托盘，以避免内存泄漏。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值