react中鼠标右击展示自定义菜单栏

xinga1016

于 2020-11-26 23:36:37 发布

阅读量2.5k

点赞数

分类专栏： react 文章标签： js react

本文链接：https://blog.youkuaiyun.com/weixin_45226867/article/details/110210239

版权

react 专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何在React应用中实现一个自定义的右键点击菜单功能。通过使用`onMouseUp`事件监听器和`refs`来控制菜单栏的显示与隐藏，实现了当用户右击按钮时展示自定义菜单的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先在元素中定义一个右击事件,注意在react中用refs来定义样式，这样不会因元素渲染而导致菜单栏展示延迟过长：

render(){
return(
	<div>
      <button onMouseUp={this.rigClick}>右击展示自定义菜单栏</button>
      <div ref="menu" style={{ position: "absolute", width: 100, height: 200,display:"none"}}>菜单栏</div>
    </div>
)
}
 rigClick = (e) => {
    //禁用浏览器默认事件
    var elef = e.clientX
    var etop = e.clientY
    var menu=this.refs.menu
    document.oncontextmenu = function(e){
      return false
      //或者 e.preventDefault()
    }
    if (e.button == 2) {
      menu.style.left = elef
      menu.style.top = etop
      menu.style.display='block'
    }
  }