Щелкните правой кнопкой мыши по меню 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
},

Это работает, но он чувствует себя немного беспорядочным, и мне было интересно, есть ли другой подход, который я мог бы использовать, любая информация была бы весьма признательна,

Спасибо!

Ответ 1

UPDATE:

Выяснил это - вот что вы можете сделать

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, если для этого реагирующего компонента щелкните правой кнопкой мыши.

Ответ 2

Есть несколько вещей, о которых нужно заботиться со всплывающими меню:

он должен быть удален от его родителя и братьев и сестер - предпочтительно в оверлее, который является последним дочерним документом document.body.
специальная логика должна заботиться о том, чтобы она всегда отображалась на экране и никогда не обрезалась краями экрана.
Если есть иерархия, дочерние всплывающие окна должны быть выровнены с элементами из предыдущего всплывающего окна (открывающий).

Я создал библиотеку, которую вы можете использовать для выполнения всех этих действий:

http://dkozar.github.io/react-data-menu/

Ответ 3

Для настройки контекстных меню в реагировании требуется намного больше (отменить привязку событий, углов, ssr и т.д.)

Кроме того, в зависимости от ваших потребностей это может привести к действительно сложному коду

Вот некоторые другие библиотеки, чтобы легко с ними справиться:

https://github.com/fkhadra/react-contexify (чаще всего используется)
https://github.com/n8tz/react-inheritable-context-menu (более простой, с наследованием меню и SSR)
http://dkozar.github.io/react-data-menu/