Reactでkeydownイベントを取得する方法

公開:2020/09/20
更新:2020/09/20
1 min読了の目安(約900字TECH技術記事

はい、みなさんこんにちは。
Reactで入力されたキーが何か判定したくなったことってありませんか?

やってみるとちょっとコツがいったので、まとめておきます。

サンプルコード

import React, { useEffect, useCallback } from "react";

export default function App() {
  const escFunction = useCallback((event) => {
    if (event.keyCode === 27) {
      // キーコードを判定して何かする。
      console.log("Esc Key is pressed!");
    }
  }, []);

  useEffect(() => {
    document.addEventListener("keydown", escFunction, false);
  }, []);

  return <input />;
}

CodeSandbox

https://codesandbox.io/s/listenkeydown-50ob8?file=/src/App.js

解説

ポイントは、グローバル変数の documentです。

useEffectの第二引数に空配列を指定すると、コンポーネントマウント時に1度だけ呼びされます。そのタイミングで、addEventListenerでコールバック関数を登録しています。

ちょっと意外なやり方ですが、これでVanilla Javascriptと同じようにイベントを取得できますね。

参考URL

https://stackoverflow.com/questions/37440408/how-to-detect-esc-key-press-in-react-and-how-to-handle-it/46123962
キーコード一覧
https://web-designer.cman.jp/javascript_ref/keyboard/keycode/