React да useEffect орқали глобал обработчиклар

Фарз қилайлик, энди биз фақатгина тугмага босилгандагина эмас, балки клавиатурада Enter тугмаси босилганда ҳам ранг ўзгарсинчи. Одатдаги React хаётида глобал window объектини addEventListener ёрдамида тинган бўлмайди. Бунинг учун бизда эффектлар мавжуд. Келинг бу ҳаракатни useEffect ёрдамида қўшайлик.

Enter тугмаси босилгандаги функция обработчини ёзайлик. Ранг бу ҳолда қизил рангга ўзгарсин:

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

Энди ҳодисаларни тинган бўлишни window га useEffect хукида боглаймиз:

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]);

Компонент берилган. Саҳифанинг istalgan нуқтасига босилганда ушбу компонентнинг фонининг ранги ўзгарадиган қилинг.

Блок пайдо бўладиган ҳаволa яратинг. Браузер дўзасининг исталган жойига босилганда бизнинг блокимиз яшириниши учун қилинг.