web-dev-qa-db-ja.com

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

これは機能しますが、少し厄介な感じがし、使用できる別のアプローチがあるかどうか疑問に思っていました。どんな情報でも大歓迎です。

ありがとう！

javascripthtmlweb-applicationsreactjsnode-webkit
20
Tom

更新：

それを考え出した-あなたができることはここにある

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に関数を渡すことができます。

35
Tom

ポップアップメニューで注意すべき点はいくつかあります。

  1. 親と兄弟から離してレンダリングする必要があります-できればdocument.bodyの最後の子であるオーバーレイで
  2. 特別なロジックは、常に画面に表示され、画面の端で切り取られないように注意する必要があります
  3. 階層が関係している場合、子ポップアップは前のポップアップ（オープナー）からのアイテムに揃える必要があります。

これらすべてを実現するために使用できるライブラリを作成しました。

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

11
Danko Kozar