Globālie apstrādātāji caur useEffect React

Pieņemsim, ka tagad mēs vēlamies, lai krāsa mainītos ne tikai noklikšķinot uz pogas, bet arī nospiežot Enter uz tastatūras. Parastā React dzīvē klausīties globālo objektu window izmantojot addEventListener nav atļauts. Šim nolūkam mums ir efekti. Pieņemsim pievienot šo darbību, izmantojot useEffect.

Uzrakstīsim notikuma apstrādātāja funkciju noklikšķinot uz Enter. Ļaujiet krāsai šajā gadījumā mainīties uz sarkanu:

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

Piesēsim tagad notikumu klausīšanos pie window useEffect hook:

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

Ja mums ir kāda iestatīšanas funkcija, tad mums vienmēr ir jāatgriežas useEffect atgriež tīrīšanas kodu vai atrakstīšanos, lai izvairītos no problēmām turpmāk. Šajā gadījumā mums pēc pievienošanas addEventListener ir jāatgriež tā noņemšana:

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

Dots komponents. Izveidojiet tā, lai, noklikšķinot uz jebkuras lapas vietas, šī komponenta fons mainītu krāsu.

Izveidojiet saiti, noklikšķinot uz kuras parādītos bloks. Izveidojiet tā, lai, noklikšķinot uz jebkuras pārlūkloga vietas, mūsu bloks tiktu paslēpts.