useEffectを使用したReactでのグローバルイベントハンドラー

ここで、ボタンをクリックしたときだけでなく、キーボードの Enterキーを押したときにも色が変わるようにしたいとします。 通常のReactの手法では、addEventListener を使用してグローバルオブジェクトwindowを監視することはできません。 この目的のために、エフェクトがあります。 useEffectを使用してこのアクションを追加してみましょう。

Enterキーが押されたときのハンドラー関数を作成しましょう。 この場合、色を赤に変更します：

App.jsxfunction handleEnter(event) {
  if (event.keyCode === 13) {
    setColor('red');
  }
}

次に、useEffectフック内でwindowへのイベントリスナーの追加を行いましょう：

App.jsxuseEffect(() => {
  document.body.style.color = color;
  
  window.addEventListener('keydown', handleEnter);
}, [color]);

セットアップ関数がある場合、将来の問題を避けるために、 useEffect内で常にクリーンアップまたは登録解除のコードを返す必要があります。 この場合、addEventListenerを追加した後、 その削除を返す必要があります：

App.jsxuseEffect(() => {
  document.body.style.color = color;
  
  window.addEventListener('keydown', handleEnter);
  
  return () => {
    window.removeEventListener('keydown', handleEnter);
  };
}, [color]);