使用React JS右键单击菜单

本文介绍了使用React JS右键单击菜单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我想知道是否有最佳实践/正确的方法来为React组件设置右键菜单.

我目前有这个...

// nw is nw.gui from Node-Webkit componentWillMount: function() { var menu = new nw.Menu(); menu .append(new nw.MenuItem({ label: 'doSomething', click: function() { // doSomething } })); // I'd like to know if this bit can be done in a cleaner/more succinct way... // BEGIN var that = this; addEventListener('contextmenu', function(e){ e.preventDefault(); // Use the attributes property to uniquely identify this react component // (so different elements can have different right click menus) if (e.target.attributes[0].nodeValue == that.getDOMNode().attributes[0].nodeValue) { menu.popup(e.x, e.y); } }) // END },

这可行，但是感觉有点混乱，我想知道是否还有我可以使用的另一种方法，任何信息将不胜感激，

谢谢！

解决方案

更新:

想通了-这是您可以做的

var addMenu; componentWillMount: function() { addMenu = new nw.Menu(); addMenu.append(new nw.MenuItem({ label: 'doSomething', click: function() { // doSomething } })); }, contextMenu: function(e) { e.preventDefault(); addMenu.popup(e.clientX, e.clientY); }, render: function(){ return <button onClick={this.handleClick} onContextMenu={this.contextMenu}>SomethingUseful</button> }

在渲染中，您可以将一个函数传递给onContextMenu，以使该React组件发生右键单击.

I'd like to know if there is a best practice/correct way to setup a right-click menu for a React component.

I currently have this...

// nw is nw.gui from Node-Webkit componentWillMount: function() { var menu = new nw.Menu(); menu .append(new nw.MenuItem({ label: 'doSomething', click: function() { // doSomething } })); // I'd like to know if this bit can be done in a cleaner/more succinct way... // BEGIN var that = this; addEventListener('contextmenu', function(e){ e.preventDefault(); // Use the attributes property to uniquely identify this react component // (so different elements can have different right click menus) if (e.target.attributes[0].nodeValue == that.getDOMNode().attributes[0].nodeValue) { menu.popup(e.x, e.y); } }) // END },

This works, but it feels a little messy and I was wondering if there was another approach I might be able to use, any information would be greatly appreciated,

Thanks!

解决方案

UPDATE:

Figured it out - here is what you can do

var addMenu; componentWillMount: function() { addMenu = new nw.Menu(); addMenu.append(new nw.MenuItem({ label: 'doSomething', click: function() { // doSomething } })); }, contextMenu: function(e) { e.preventDefault(); addMenu.popup(e.clientX, e.clientY); }, render: function(){ return <button onClick={this.handleClick} onContextMenu={this.contextMenu}>SomethingUseful</button> }

In render you can pass a function to onContextMenu for when a right click occurs for this react component.