Notikumu pievienošana JSX

Tagad pētīsim darbu ar notikumiem React. Piemēram, izveidosim tā, lai uzklikšķinot uz bloka tiktu izvadīts alert ar kādu tekstu.

Pieņemsim, ka mums ir funkcija showMess, kas izvada alert ar ziņojumu, un HTML kodā ir poga, uz kuras noklikšķinot mēs vēlētos redzēt šo alert:

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

Piesaistīsim mūsu pogai notikumu onclick tā, lai, uzklikšķinot uz šī div, darbotos funkcija showMess. Lai to izdarītu, jāpievieno atribūts onClick (tieši camelCase, tas ir onClick, nevis onclick), un tajā jānorāda funkcija, kas izpildīsies pēc šī notikuma:

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

Tā notiek darbs ar notikumiem: tiek pievienots atribūts (piemēram, onClick vai onFocus), atribūta vērtībā tiek norādīta metode, kas tiks izsaukta pēc šī notikuma.

Dots šāds kods:

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

Izdariet tā, lai, uzklikšķinot uz pirmās pogas, darbotos pirmā funkcija, bet, uzklikšķinot uz otrās pogas - otrā funkcija.