Gestionarii globali prin useEffect în React

Să presupunem că acum vrem ca culoarea să se schimbe nu doar la click pe buton, ci și la apăsarea tastei Enter de pe tastatură. În mod normal în React, a asculta obiectul global window folosind addEventListener nu este permis. Pentru asta avem efecte. Haideți să adăugăm această acțiune folosind useEffect.

Să scriem funcția gestionară la click pe Enter. Fie ca culoarea în acest caz să se schimbe în roșu:

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

Să legăm acum ascultarea evenimentelor de window în hook-ul useEffect:

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

Dacă avem o funcție de instalare, atunci întotdeauna trebuie în useEffect să returnăm codul de curățare sau dezabonare, pentru a evita problemele ulterioare. În acest caz, după atașarea addEventListener trebuie să returnăm eliminarea acestuia:

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

Este dat un component. Faceți astfel încât la click în orice loc al paginii, fundalul acestui component să își schimbe culoarea.

Creați un link, la apăsarea căruia va apărea un bloc. Faceți astfel încât la apăsarea în orice loc al ferestrei browser-ului blocul nostru să se ascundă.