KeyboardShortcuts

例

<KeyboardShortcuts /> を shortcuts プロパティオブジェクトでレンダリングします:

import { useState } from 'react';
import { KeyboardShortcuts } from '@wordpress/components';
const MyKeyboardShortcuts = () => {
   const [ isAllSelected, setIsAllSelected ] = useState( false );
   const selectAll = () => {
   setIsAllSelected( true );
   };
   return (
   <div>
   <KeyboardShortcuts
   shortcuts={ {
   'mod+a': selectAll,
   } }
   />
   [cmd/ctrl + A] Combination pressed? { isAllSelected ? 'Yes' : 'No' }
   </div>
   );
};

プロパティ

コンポーネントは以下のプロパティを受け入れます:

子要素

レンダリングする要素で、キーイベントが監視される対象です。

• タイプ: ReactNode
• 必須: いいえ
  

ショートカット

ショートカットバインディングのオブジェクトで、各キーはキーボードの組み合わせであり、その値はキーの組み合わせが押されたときに呼び出されるコールバックです。

• タイプ: Object
• 必須: はい

注意: 各ショートカットの値は、一貫した関数参照であるべきであり、匿名関数ではありません。そうしないと、コンポーネントがアンマウントされたときにコールバックが正しく解除されません。

注意: KeyboardShortcuts コンポーネントは、変更された shortcuts プロパティを反映するようには更新されません。ショートカットを変更する必要がある場合は、ユニークな key プロパティを割り当てることで、別の KeyboardShortcuts 要素をマウントします。

bindGlobal

デフォルトでは、キーの組み合わせが編集可能なフィールドで発生した場合、コールバックは呼び出されません。キーイベントを編集可能なフィールド内も含めてグローバルに観察する必要がある場合は、bindGlobal を true として渡します。

• タイプ: Boolean
• 必須: いいえ

ヒント: すべてのキーボードイベントをグローバルに観察する必要があるが、一部のイベントだけが必要な場合は、KeyboardShortcuts 要素を2つ異なるものとしてレンダリングします。一方には bindGlobal プロパティがあり、もう一方にはありません。

イベント名

デフォルトでは、keydown イベントに応じてコールバックが呼び出されます。これをオーバーライドするには、特定のキーボードイベントの名前を持つ eventName を渡します。

• タイプ: String
• 必須: いいえ
  

参考文献

• Mousetrap ドキュメント