React 例子 - 右键菜单 context menu

最新推荐文章于 2024-08-10 07:26:51 发布

停止更新+1

最新推荐文章于 2024-08-10 07:26:51 发布

阅读量1.4w

点赞数

文章标签： react javascript

本文链接：https://blog.csdn.net/anyicheng2015/article/details/78581064

版权

这篇博客介绍了如何在React应用中实现右键菜单功能。通过使用HTML的contextmenu事件，结合React的状态管理，创建了一个可显示和隐藏的右键菜单。详细代码示例展示了事件监听、状态控制以及菜单内容的展示过程。

摘要由CSDN通过智能技术生成

代码并非原创，忘了从哪里找到的，如有人知道，可博客留言。
效果点击链接：
https://codepen.io/Anyicheng2015/pen/jaayMw

首先，你要对React有点了解。其次，你要明白HTML的事件处理机制。

我先贴代码的框架，然后逐步完善。

class ContextMenu extends React.Component {
   
    constructor(props) {
        super(props);
    }  
    componentDidMount() {
    }

    componentWillUnmount() {
    }
    render() {
    }
}

ReactDOM.render(<ContextMenu />, document.getElementById('root'));

鼠标右击事件，通常的‘click’事件是针对鼠标左键，mousedown是鼠标左键和右键及中间键都可以。那么有没有鼠标右键的事件呢？
有的，在HTML里面支持contextmenu事件。
https://developer.mozilla.org/en-US/docs/Web/Events/contextmenu
添加contextmenu事件处理：

document.addEventListener('contextmenu', this._handleContextMenu);

当然也需要移除：

document.removeEventListener('contextmenu', this._handleContextMenu);

当鼠标点到其它地方，或者滚动的时候，不要显示右键菜单，需要添加其他事件。反应到代码上面：

    componentDidMount() {
        document.addEventListener('contextmenu', this._handleContextMenu);
        document.addEventListener('click', this._handleClick);
        document.addEventListener('scroll', this._handleScroll);
    };

    componentWillUnmount() {
      document.removeEventListener('contextmenu', this._handleContextMenu);
      document.removeEventListener('click', this._handleClick);
      document.removeEventListener('scroll', this._handleScroll);
    }