Globale Event-Handler mit useEffect in React

Nehmen wir an, wir möchten nun, dass sich die Farbe nicht nur durch einen Klick auf den Button ändert, sondern auch durch Drücken der Enter-Taste auf der Tastatur. Im normalen React-Leben ist es nicht zulässig, das globale Objekt window zu überwachen, indem man addEventListener verwendet. Dafür haben wir Effekte. Fügen wir diese Aktion mit useEffect hinzu.

Schreiben wir eine Handler-Funktion für den Klick auf Enter. Die Farbe soll sich in diesem Fall in Rot ändern:

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

Binden wir nun das Abhören von Ereignissen an window im Hook useEffect:

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

Wenn wir eine Einrichtungsfunktion haben, müssen wir immer in useEffect einen Bereinigungscode zurückgeben, um spätere Probleme zu vermeiden. In diesem Fall müssen wir nach dem Anhängen von addEventListener dessen Entfernung zurückgeben:

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

Eine Komponente ist gegeben. Sorgen Sie dafür, dass sich der Hintergrund dieser Komponente ändert, wenn irgendwo auf der Seite geklickt wird.

Erstellen Sie einen Link, bei dessen Klick ein Block erscheint. Sorgen Sie dafür, dass der Block ausgeblendet wird, wenn irgendwo im Browserfenster geklickt wird.