javascript - helmet - react fragment vs div
Menú del botón derecho utilizando React JS (2)
ACTUALIZAR:
Lo descubrí - esto es lo que puedes hacer
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>
}
En el procesamiento, puede pasar una función a onContextMenu para cuando se haga clic con el botón derecho para este componente de reacción.
Me gustaría saber si hay una forma recomendada / correcta de configurar un menú de clic derecho para un componente React.
Actualmente tengo este ...
// 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
},
Esto funciona, pero se siente un poco desordenado y me preguntaba si habría otro método que pudiera usar, cualquier información sería muy apreciada.
¡Gracias!
Hay algunas cosas que cuidar con los menús emergentes:
- debe estar alejado de sus padres y hermanos, preferiblemente en una superposición que es el último hijo de document.body
- la lógica especial debe tener cuidado de que siempre se muestre en la pantalla y nunca se recorte por los bordes de la pantalla
- si hay una jerarquía involucrada, las ventanas emergentes secundarias deben alinearse con los elementos de la ventana emergente anterior (abridor).
Creé una biblioteca que puedes usar para lograr todo esto: