問題タブ [mousetrap]

Mousetrapライブラリを使用して、React の別のコンポーネントから 1 つの関数を呼び出そうとしています。

ここで、私がやりたいことはMousetrap.bind('e', function(e) { Child.open() });、親のどこかで呼び出すことです (親はレンダリングされ、子はこのコマンドでのみレンダリングされるため)。しかし、実際にそれをどこに含めるかはわかりません。render()コンストラクター、または のどこか、または私が考慮していない他の場所でそれを呼び出す方が良いでしょうか?

私はワードプレスを使用しています。

添付ファイルのページを左右のキーでナビゲートしたい。

これが私のコードですが、機能していません。

それを変えたら

これに

スクリプトはうまく機能します。ただし、WordPress ベースのリンク ( next_image_link();など)は使用できません。

私に何ができる？

キーボード ショートカットは、Web アプリケーションで管理するのが少し難しいです。

コンポーネントを検討しWidgetます。

キーボード ショートカットに基づいて、特定の要素にフォーカスし、このコンポーネントで関数を実行できるようにしたいと考えています。

setBindings と removeBindings は、 mousetrapのようなライブラリを使用して、特定のキーボード ショートカットをバインドします。

さて、上記の解決策には 2 つの問題があります。

1. キーボード ショートカットの動作が予測不能になります
   • 2 つのウィジェットがマウントされ、一方が他方をオーバーライドする場合を考えてみましょう
2. ウィジェットはショートカットと密接に結合されます。ショートカットを使用したくない場合は、何らかのフラグをオンにする必要がありますWidget。この破棄はコードの「粒度」です。理想的には、ユーザーは Widget を使用してから WidgetWithShortcuts などを使用できる必要があります。

別の潜在的な解決策は、インスタンスを渡すことです

2番目のソリューションの問題は次のとおりです。

1. widgetInstance は、focusSomeThing や invokeProp など、公開されている多くのメソッドを公開する必要があります。

2. Widget特定の場所にキーボード ショートカットを表示するツールチップが必要な場合は、キーボード ショートカットに関する情報が別の場所に複製されます。ある場所でショートカットを変更し、別の場所でそれを忘れることが可能になります

上記の問題を解決してキーボード ショートカットを実装する方法について、ベスト プラクティスやアイデアはありますか?