react-keydownを使用して内部コンポーネントのkeydownイベントをキャッチ

Question

私はアプリケーションにキーボードショートカットを追加するためにreact-keydownライブラリを使用していますが、内部ダイアログコンポーネントでは動作させることはできません。ダイアログは常に表示されているわけではありませんが、キーが表示されているときにそのキーが機能することを期待しています。 は私がevent_handlers.js._onKeyDown（イベント）方法を取得していますが、欠損値で：未定義FN =、 FN一方で装飾された機能が含まれている必要があります。

<Container> 
    <MyDialog> 
     <material-ui-dialog/> 
    </MyDialog> 
</Container> 

Container.js：

import keydown from 'react-keydown' 
class Container extends Component { 
    @keydown('enter') 
    someMethod1(){ 
     // working 
    } 
    render() { 
     return (
     <div> 
      <MyDialog/> 
     </div> 
    ) 
    } 
} 

MyDialog.js：

私のコンポーネントがどのように見えるコメントにあなたの説明に基づいて

import keydown, {keydownScoped} from 'react-keydown' 
@keydown('enter') 
class MyDialog extends Component { 
    @keydownScoped('enter') 
    someMethod3(){ 
     // not working 
    } 
} 

Answer 1

、問題が表示されますにあなたのDialogコンポーネントがマウントされてフォーカスが失われるようにして、その中のキーバインドがキーストロークを受け取らないようにするs。

1）Dialogコンポーネントの祖先であり、フォーカスを失うことのないコンポーネントをデコレートすることによって、キーバインドの範囲を拡張します。極端な場合、これはアプリのルートコンポーネントになる可能性があります。次に、希望のDialogコンポーネントメソッドをkeydownScopedで飾ります。そのメソッドの中で、現在のダイアログがアクティブなものであることを確認するために小道具を調べます。

2）このhttps://github.com/glortho/react-keydown/issues/28の行に沿ってダイアログキーバインドをプログラムでアクティブにします。

希望に役立ちます！