React-da useEffect arkaly global işleýjiler

Indi diňe düwmä basmak arkaly däl-de, çyzyk düzüminde Enter basylanda-da reňk üýtgermegini isleýändigimizi farz edeliň. Adaty React durmuşynda window global obyektine addEventListener ulanyp gulap bolmaýar. Bu maksat üçin biziň efektlerimiz bar. Geliň bu hereketi useEffect arkaly goşalyň.

Enter basylanda işleýji funksiýany ýazalyň. Bu ýagdaýda reňk gyzyl bolup üýtgersin:

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

Indi waka gulaşdyrmagy window-a useEffect hook içinde baglalyň:

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

Eger biziň durnukly ýerleşdiriji funksiýamyz bar bolsa, useEffect içinde daýma arassalaýyş ýa-da yzygiderliligi ýatyryş koduny yzyna gaýtarmaly, soňrak meselelerden gaça durmak üçin. Bu ýagda, biz addEventListener birikdirenimizden soň, ony aýyrmagy yzyna gaýtarmaly:

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

Komponent berlen. Onuň fon reňkiniň sahypanyň islendik ýerine basylanda üýtgemegini ýerine ýetiriň.

Basylanda blok peýda bolýan baglanyşyk ýasaň. Brauzer penjiresiniň islendik ýerine basylanda biziň blokymyzyň gizlenýändigini ýerine ýetiriň.