Dodeljivanje događaja u JSX-u

Hajde sada da istražimo rad sa događajima u React-u. Na primer, hajde da napravimo da klikom na blok iskoči alert sa određenim tekstom.

Neka imamo funkciju showMess, koja prikazuje alert sa porukom, a u HTML kodu postoji dugme, na čiji klik bismo želeli da vidimo taj alert:

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

Hajde da povežemo sa našim dugmetom događaj onclick tako da klikom na ovaj div se poziva funkcija showMess. Za ovo je potrebno dodati atribut onClick (tačno u camelCase-u, odnosno onClick, a ne onclick), a u njemu naznačiti funkciju koja će se izvršiti pri tom događaju:

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

Tako se i odvija rad sa događajima: dodaje se atribut (na primer, onClick ili onFocus), a kao vrednost atributa se navodi metoda koja će biti pozvana pri tom događaju.

Dat je sledeći kod:

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

Učinite tako da klikom na prvo dugme se poziva prva funkcija, a klikom na drugo dugme - druga funkcija.