Přidávání událostí v JSX

Pojďme se nyní naučit pracovat s událostmi v Reactu. Udělejme například to, aby po kliknutí na blok byl zobrazen alert s určitým textem.

Předpokládejme, že máme funkci showMess, která zobrazí alert se zprávou, a v HTML kódu je tlačítko, na které bychom chtěli kliknout a vidět tento alert:

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

Pojďme k našemu tlačítku připojit událost onclick tak, aby po kliknutí na toto div byla spuštěna funkce showMess. K tomu je potřeba přidat atribut onClick (právě v camelCase, tedy onClick, ne onclick), a v něm určit funkci, která se při této události spustí.

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

Takto probíhá práce s událostmi: přidá se atribut (například onClick nebo onFocus), jako hodnota atributu se určí metoda, která bude při této události volána.

Je dán následující kód:

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

Zařiďte, aby po kliknutí na první tlačítko byla spuštěna první funkce, a po kliknutí na druhé tlačítko - druhá funkce.