制作右键菜单

1.首先制作菜单,并设置display属性为none

const RightMenu=()=>(
  <div className="menu" >
      <ul>
        <li onClick={()=>{console.log(8)}}>功能1</li>
        <li onClick={()=>{console.log(8)}}>功能2</li>
        <li onClick={()=>{console.log(8)}}>功能3</li>
        <li onClick={()=>{console.log(8)}}>功能4</li>
        <li onClick={()=>{console.log(8)}}>功能5</li>
      </ul>
    </div>
)

2.在自己的节点内选阻止右键默认时间并设置菜单属性

componentDidMount(){

    this.box.current.oncontextmenu=(e)=>{
      e.preventDefault()
      this.menu.style.display='block'
      this.menu.style.left=e.clientX+'px'
      this.menu.style.top=e.clientY+'px'
    }
  }

 

posted on 2020-06-11 16:48  秃了头也不退休  阅读(193)  评论(0编辑  收藏  举报

导航