【React】特定のキーが入力された時に処理を行う方法

Escが入力された際の処理

以下のように記述するとEscが入力された際に実行される処理を定義できます。

import { useEffect } from 'react';

const Sample = () => {
  useEffect(() => {
    const handleEscape = (event) => {
      if (event.key === 'Escape') {
        // エスケープキーが押された時の処理をここに記述する
        console.log('Escape key was pressed!');
      }
    };

    document.addEventListener('keydown', handleEscape);

    return () => {
      document.removeEventListener('keydown', handleEscape);
    };
  }, []);

  return <div>sample</div>;
};

export default MyComponent;