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

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

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

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

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

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

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

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

コンポーネントが与えられています。ページの任意の場所をクリックすると、このコンポーネントの背景色が変わるようにしてください。

ブロックを表示するリンクを作成してください。また、ブラウザウィンドウの任意の場所をクリックすると、作成したブロックが非表示になるようにしてください。