Fare clic con il pulsante destro del mouse su React JS

Question

Vorrei sapere se esiste una procedura consigliata/modo corretto per impostare un menu di scelta rapida per un componente React.

Al momento ho questa ...

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

Questo funziona, ma ci si sente un po 'disordinato e mi chiedevo se ci fosse un altro approccio che potrei essere in grado di utilizzare, tutte le informazioni sarebbe molto apprezzato,

Grazie!

Answer 1

UPDATE:

capito - ecco cosa si può fare

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 rendere è possibile passare una funzione da onContextMenu per quando si verifica un clic destro per questo componente reagire.

Answer 2

ci sono alcune cose da prendere a cuore con menu a comparsa:

1. dovrebbe essere reso di distanza dal suo genitore e fratelli - preferibilmente in una sovrapposizione che è l'ultimo figlio di document.body
2. speciale la logica dovrebbe fare attenzione che sia sempre visualizzata sullo schermo e mai ritagliata dai bordi dello schermo
3. se è presente una gerarchia, i popup figlio devono essere allineati agli elementi del precedente popup (opener).

ho creato una libreria che è possibile utilizzare per realizzare tutti questi:

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