Események hozzárendelése JSX-ben

Most tanulmányozzuk az eseménykezelést Reactban. Például tegyük úgy, hogy egy blokkra kattintva egy alert jelenjen meg valamilyen szöveggel.

Tegyük fel, hogy van egy showMess függvényünk, amely egy alert-et jelenít meg egy üzenettel, és a HTML kódban van egy gomb, amelyre kattintva szeretnénk látni ezt a alert-et:

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

Rendeljük hozzá a gombunkhoz az onclick eseményt úgy, hogy erre a div-re kattintva a showMess függvény aktiválódjon. Ehhez hozzá kell adni az onClick attribútumot (éppen camelCase-ben, azaz onClick, nem pedig onclick), és meg kell adni benne azt a függvényt, amely lefut az esemény bekövetkeztekor:

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

Így működik az eseménykezelés: hozzáadunk egy attribútumot (például onClick vagy onFocus), az attribútum értékeként pedig megadjuk azt a metódust, amely az esemény bekövetkeztekor meghívásra kerül.

Adott a következő kód:

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

Tegye úgy, hogy az első gombra kattintva az első függvény fusson le, a második gombra kattintva pedig a második függvény.