Sündmuste lisamine JSX-s

Uurime nüüd sündmustega töötamist Reactis. Teeme näiteks nii, et klõpsates blokil kuvataks alert mingi tekstiga.

Olgem, et meil on funktsioon showMess, mis kuvab alert teatega, ja HTML koodis on nupp, millele klõpsates me tahaksime näha seda alert't:

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

Seome oma nupuga sündmuse onclick nii, et sellele divile klõpsates käivitub funktsioon showMess. Selleks tuleb lisada atribuut onClick (täpselt camelCase'is, st onClick, mitte onclick), ja selles määrata funktsioon, mis käivitatakse selle sündmuse korral:

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

Nii toimubki sündmustega töötamine: lisatakse atribuut (näiteks onClick või onFocus), atribuudi väärtuseks määratakse meetod, mis kutsutakse selle sündmuse korral välja.

Antud on järgmine kood:

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

Tehke nii, et esimesel nupul klõpsates käivitub esimene funktsioon ja teisel nupul klõpsates - teine funktsioon.