React useKeyPress フック

はじめに

この実験では、特定のキーの押下状態の変化を監視するカスタム React フック useKeyPress を作成する方法を学びます。このフックは、ユーザーが特定のキーを押しているかどうかを検出する必要があるシナリオで役立ちます。それぞれの状態とイベントリスナーを処理するために、useState と useEffect フックを使用します。

Skills Graph

React useKeyPress フック

VM には既に index.html と script.js が用意されています。一般的には、script.js と style.css にのみコードを追加すればよいです。

この関数は、特定のキーの押下状態の変化を監視します。これを使用するには：

• 対象のキーを引数として useKeyPress() を呼び出します。
• useKeyPress() は、現在キーが押されているかどうかを示すブール値を返します。
• この関数は useState() フックを使用して、特定のキーの押下状態を保持する状態変数を作成します。
• キーが押されたときまたは離されたときに状態変数を更新する 2 つのハンドラ関数を定義します。
• useEffect() フックと EventTarget.addEventListener() を使用して、'keydown' と 'keyup' イベントを処理します。
• 最後に、EventTarget.removeEventListener() を使用して、コンポーネントがアンマウントされた後のクリーンアップ処理を行います。

const useKeyPress = (targetKey) => {
  const [isKeyPressed, setKeyPressed] = React.useState(false);

  const handleKeyDown = ({ key }) => {
    if (key === targetKey) setKeyPressed(true);
  };

  const handleKeyUp = ({ key }) => {
    if (key === targetKey) setKeyPressed(false);
  };

  React.useEffect(() => {
    window.addEventListener("keydown", handleKeyDown);
    window.addEventListener("keyup", handleKeyUp);

    return () => {
      window.removeEventListener("keydown", handleKeyDown);
      window.removeEventListener("keyup", handleKeyUp);
    };
  }, [targetKey]);

  return isKeyPressed;
};

ここでは、React コンポーネントでの useKeyPress() の使用例を示します：

const MyApp = () => {
  const isWKeyPressed = useKeyPress("w");

  return <p>The "w" key is {!isWKeyPressed ? "not " : ""}pressed!</p>;
};

ReactDOM.render(<MyApp />, document.getElementById("root"));

右下隅の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行してください。その後、Web 8080 タブを更新してウェブページをプレビューできます。

まとめ

おめでとうございます！あなたは React useKeyPress フックの実験を完了しました。あなたの技術を向上させるために、LabEx でさらに多くの実験を練習できます。