Глобални руковаоци кроз useEffect у React-у

Претпоставимо да сада желимо да се боја мења не само при клику на дугме, већ и при притискању тастера Enter на тастатури. У уобичајеном React окружењу, слушање глобалног објекта window користећи addEventListener није дозвољено. За то имамо ефекте. Хајде да додамо ову акцију помоћу useEffect.

Написаћемо функцију руковаоца за клик на Enter. Нека боја у том случају постане црвена:

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

Сада ћемо прикачити слушање догађаја на window у hook-у 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]);

Дат је компонент. Направите тако да при клику на било које место странице позадина овог компонента мења боју.

Направите линк, при клику на који ће се појавити блок. Направите тако да при клику на било које место у прозору претраживача наш блок буде сакривен.