Pridávanie udalostí v JSX

Poďme si teraz preštudovať prácu s udalosťami v Reacte. Napríklad, urobme tak, aby po kliknutí na blok bol vyvolaný alert s nejakým textom.

Nech máme funkciu showMess, ktorá zobrazí alert so správou, a v HTML kóde je tlačidlo, na ktoré by sme chceli kliknúť a vidieť tento alert:

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

Poďme pripojiť k nášmu tlačidlu udalosť onclick tak, aby po kliknutí na toto div spustila funkcia showMess. Na to je potrebné pridať atribút onClick (práve v camelCase, teda onClick, nie onclick), a v ňom uviesť funkciu, ktorá sa vykoná pri tejto udalosti:

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

Takto prebieha práca s udalosťami: pridá sa atribút (napríklad onClick alebo onFocus), hodnotou atribútu je metóda, ktorá sa zavolá pri tejto udalosti.

Daný je nasledujúci kód:

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

Urobte tak, aby po kliknutí na prvé tlačidlo sa spustila prvá funkcia, a po kliknutí na druhé tlačidlo - druhá funkcia.