Globala hanterare via useEffect i React

Antag att vi nu vill att färgen ska ändras inte bara genom att klicka på knappen, utan även genom att trycka på Enter på tangentbordet. I ett vanligt React-liv kan man inte lyssna på det globala objektet window genom att använda addEventListener. För detta har vi effekter. Låt oss lägga till denna funktion med useEffect.

Låt oss skriva en hanterarfunktion för klick på Enter. Låt färgen i det här fallet ändras till röd:

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

Låt oss nu binda händelselyssnaren till window i hooken useEffect:

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

Om vi har någon installationsfunktion måste vi alltid returnera en rengöringskod eller avregistreringskod i useEffect för att undvika problem i framtiden. I detta fall behöver vi efter att ha lagt till addEventListener returnera dess borttagning:

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

Denna komponent är given. Gör så att genom att klicka på vilken som helst plats på sidan ändras bakgrunden för denna komponent färg.

Skapa en länk, vid klick på vilken ett block ska visas. Gör så att genom att klicka på vilken som helst plats i webbläsarfönstret döljs vårt block.