web-dev-qa-db-fra.com

Menu clic droit en utilisant React JS

Je voudrais savoir s'il existe une meilleure pratique/méthode correcte pour configurer un menu contextuel pour un composant React.

J'ai actuellement ceci ...

// 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
},

Cela fonctionne, mais cela semble un peu désordonné et je me demandais s'il y avait une autre approche que je pourrais utiliser, n'importe quelle information serait grandement appréciée,

Merci!

javascripthtmlweb-applicationsreactjsnode-webkit
20
Tom

MISE À JOUR:

Je l'ai compris - voici ce que vous pouvez faire

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>
}

Dans le rendu, vous pouvez transmettre une fonction à onContextMenu lorsqu'un clic droit se produit pour ce composant React.

35
Tom

Il y a peu de choses à prendre en compte avec les menus contextuels:

  1. il doit être rendu éloigné de son parent et de ses frères et sœurs - de préférence dans une superposition qui est le dernier enfant de document.body
  2. une logique spéciale doit veiller à ce qu'elle soit toujours affichée à l'écran et ne soit jamais recadrée par les bords de l'écran
  3. s'il y a une hiérarchie impliquée, les popups enfants doivent être alignés sur les éléments de la popup précédente (ouvre).

J'ai créé une bibliothèque que vous pouvez utiliser pour accomplir tout cela:

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

11
Danko Kozar