Globální obslužné rutiny přes useEffect v Reactu

Předpokládejme, že nyní chceme, aby se barva měnila nejen po kliknutí na tlačítko, ale také po stisknutí Enter na klávesnici. V běžném React životě nemůžeme poslouchat globální objekt window pomocí addEventListener. K tomu máme efekty. Pojďme přidat tuto akci pomocí useEffect.

Napišme funkci obslužné rutiny pro kliknutí na Enter. Ať se barva v tomto případě změní na červenou:

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

Nyní připojme poslouchání událostí k window v hooku useEffect:

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

Pokud máme nějakou instalační funkci, musíme vždy v useEffect vrátit kód pro čištění nebo odhlášení, abychom předešli problémům v budoucnu. V tomto případě potřebujeme po připojení addEventListener vrátit jeho odstranění:

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

Je dán komponent. Zařiďte, aby po kliknutí na jakékoli místo stránky se pozadí tohoto komponentu změnilo.

Vytvořte odkaz, po jehož kliknutí se objeví blok. Zařiďte, aby po kliknutí na jakékoli místo okna prohlížeče se náš blok skryl.