React-та useEffect арқылы жаһандық өңдеушілер

Енді біз түсті тек батырманы басу арқылы ғана емес, сонымен қатар пернетақтадан Enter басу арқылы дә өзгертуді қалайтынымызды жорамалдайық. Кәдімгі React өмірінде addEventListener қолданып, window жаһандық нысанына тыңдау жүргізу мүмкін емес. Бұл үшін бізде эффекттер бар. Бұл әрекетті useEffect көмегімен қосайық.

Enter басу кезіндегі өңдеуші функцияны жазайық. Түс бұл жағдайда қызыл түске өзгерсін:

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

Енді оқиғаларды тыңдауды useEffect хукінде window-ке байланейық:

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

Егер бізде қандай да бір орнату функциясы болса, онда біз әрдайым useEffect-те болашақтағы проблемалардан сақтану үшін тазарту немесе жазылудан бас тарту кодын қайтаруымыз керек. Бұл жағдайда бізге addEventListener-ті бекіткеннен кейін оны жоюды қайтару керек:

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

Компонент берілген. Парақтың кез келген жерін басқанда осы компоненттің фонының түсі өзгеретіндей етіңіз.

Блоктың пайда болатын сілтеме жасаңыз. Браузер терезесінің кез келген жерін басқанда біздің блоктың жасырылатындей етіңіз.