Vichakataji wa Kimataifa Kupitia useEffect katika React

Tukichukulia kuwa sasa tunataka, rangi ibadilike sio tu kwa kubofya kitufe, lakini pia kwa kubonyeza Enter kwenye kibodi. Katika maisha ya kawaida ya React, kusikiliza kitu cha kimataifa window kwa kutumia addEventListener haikubaliki. Kwa hili tunao madhara. Wacha tuongeze kitendo hiki kwa kutumia useEffect.

Tuandike kitendakazi kinachochakata kwa kubofya Enter. Rangi ikibadilika katika hali hii iwe nyekundu:

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

Sasa tunganishe usikilizaji wa matukio kwa window katika kichujio useEffect:

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

Ikiwa tuna kitendakazi fulani cha kusanikisha, basi kila wakati tunahitaji katika useEffect kurejesha msimbo wa usafishaji au kujiondoa, ili kuepuka matatizo baadaye. Katika kesi hii, baada ya kuambatisha addEventListener tunahitaji kurudisha kuondolewa kwake:

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

Kipengele kimetolewa. Fanya iweze kufanyika ili kwa kubofya sehemu yoyote ya ukurasi, msingi wa kipengele hiki ubadilishe rangi.

Tengenezza kiungo, ambacho kwa kubonyeza kitafungua block. Fanya iweze kufanyika ili kwa kubonyeza sehemu yoyote ya dirisha la kivinjari block yetu ifichike.