Globale verwerpers via useEffect in React

Gestel ons wil nou hê dat die kleur nie net verander as ons op die knoppie klik nie, maar ook as ons Enter op die sleutelbord druk. In gewone React-lewe kan ons nie die globale voorwerp window monitor deur addEventListener te gebruik nie. Vir dit het ons effekte. Kom ons voeg hierdie aksie by deur useEffect te gebruik.

Kom ons skryf die verwerperfunksie vir 'n klik op Enter. Laat die kleur in hierdie geval na rooi verander:

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

Kom ons koppel nou die gebeurtenismonitoring aan window in die useEffect-hook:

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

As ons 'n opstel- of instansiëringsfunksie het, moet ons altyd in useEffect die skoonmaak- of afmeldkode teruggee om probleme in die toekoms te vermy. In hierdie geval moet ons na die aanhegting van addEventListener die verwydering daarvan teruggee:

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

Hierdie komponent is gegee. Maak so dat die agtergrond van hierdie komponent van kleur verander as jy op enige plek op die bladsy klik.

Maak 'n skakel, en as jy daarop klik, moet 'n blok verskyn. Maak so dat die blok weggesteek word as jy op enige plek in die blaaier venster klik.