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

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

спасибо!

17
html javascript node-webkit reactjs web-applications

2 ответов

обновление:

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

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.

25

есть несколько вещей, чтобы заботиться о с всплывающее меню:

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

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

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

7