Kuweka Matukio katika JSX

Wacha sasa tuchunguze kazi na matukio kwenye React. Kwa mfano, tufanye ili kwa kubofya kwenye kizuizi kiwe kinachoonyesha alert na maandishi fulani.

Wacha tuwe na funkta showMess, ambayo inaonyesha alert na ujumbe, na kwenye msimbo wa HTML kuna kitufe, ambacho kwa kubofya juu yake sisi tungependa kuona alert hii:

function App() {
	function showMess() {
		alert('hello');
	}
	
	return <div>
		<button>show</button>
	</div>;
}

Wacha tuunge tukio onclick kwenye kitufe chetu hivi kwamba kwa kubofya kwenye kizuizi hiki ifanye kazi funkta showMess. Ili kufanya hivyo, ni muhimu kuongeza sifa onClick (hasa kwa camelCase, yaani onClick, na si onclick), na ndani yake bainisha funkta, ambayo itatekelezwa kwa tukio hili:

function App() {
	function showMess() {
		alert('hello');
	}
	
	return <div>
		<button onClick={showMess}>show</button>
	</div>;
}

Hivi ndivyo kazi na matukio inavyofanyika: sifa huongezwa (kwa mfano, onClick au onFocus), thamani ya sifa inabainisha kitendo ambacho kitaitwa kwa tukio hilo.

Kuna msimbo ufuatao:

function App() {
	function show1() {
		alert(1);
	}
	
	function show2() {
		alert(2);
	}
	
	return <div>
		<button>act1</button>
		<button>act2</button>
	</div>;
}

Fanya ili kwa kubofya kwenye kitufe cha kwanza kifanye kazi funkta ya kwanza, na kwa kubofya kwenye kitufe cha pili - funkta ya pili.