Atasarea evenimentelor în JSX

Să studiem acum lucrul cu evenimentele în React. De exemplu, să facem astfel încât la clic pe un bloc să se afișeze un alert cu un anumit text.

Să presupunem că avem funcția showMess, care afișează un alert cu un mesaj, iar în codul HTML există un buton, pe care la clic am dori să vedem acest alert:

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

Să asociem butonului nostru evenimentul onclick astfel încât la clic pe acest div să se execute funcția showMess. Pentru aceasta trebuie adăugat atributul onClick (exact în camelCase, adică onClick, nu onclick), iar în el să se indice funcția care se va executa la acest eveniment:

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

Astfel se întâmplă lucrul cu evenimentele: se adaugă un atribut (de exemplu, onClick sau onFocus), ca valoare a atributului se indică metoda care va fi apelată la acest eveniment.

Este dat următorul cod:

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

Faceți astfel încât la clic pe primul buton să se execute prima funcție, iar la clic pe al doilea buton - a doua funcție.