React හි useEffect හරහා ගෝලීය සංසාධක

දැන් අපට අවශ්‍ය යැයි සිතමු, පිහිටුම් බොත්තම ක්ලික් කිරීම මත පමණක් නොව, කිවුස්පතෙහි Enter යතුර එබීම මත ද වර්ණය වෙනස් වේ. සාමාන්‍ය React ජීවිතයේදී, window ගෝලීය වස්තුව addEventListener භාවිතා කර අසා නොයෙදිය හැකිය. මේ සඳහා අපට ඇත්තේ බලපෑම්. අපි 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]);

සංරචකයක් ලබා දී ඇත. පිටුවේ ඕනෑම ස්ථානයක ක්ලික් කිරීමකදී මෙම සංරචකයේ පසුබිම් වර්ණය වෙනස් වන පරිදි සකසන්න.

එය ක්ලික් කළ විට බ්ලොක් එකක් දිස්වන සබැඳියක් සාදන්න. බ්රවුසර් කව්ළුවේ ඕනෑම ස්ථානයක ක්ලික් කළ විට අපගේ බ්ලොක් එක සඟවන පරිදි සකසන්න.