JavaScript   发布时间:2022-04-16  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了javascript – 使用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
},

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

谢谢!

解决方法

@H_801_13@ 更新:

看出来 – 这是你可以做的

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,以便在此反应组件发生右击时.

大佬总结

以上是大佬教程为你收集整理的javascript – 使用React JS右键单击菜单全部内容,希望文章能够帮你解决javascript – 使用React JS右键单击菜单所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。