Tapahtumien kytkeminen JSX:ssä

Opitaan nyt työskentelemään tapahtumien kanssa Reactissa. Tehdään esimerkiksi niin, että klikkaamalla diviä näytetään alert jollain tekstillä.

Oletetaan, että meillä on funktio showMess, joka näyttää alert viestillä, ja HTML- koodissa on painike, jota klikkaamalla haluaisimme nähdä tämän alertn:

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

Kytketään painikkeellemme tapahtuma onclick niin, että tätä diviä klikkaamalla suoritetaan funktio showMess. Tätä varten tarvitaan attribuutti onClick (juuri camelCase-muodossa, eli onClick, eikä onclick), ja siihen määritetään funktio, joka suoritetaan kyseisen tapahtuman yhteydessä:

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

Näin tapahtumien kanssa työskentely tapahtuu: lisätään attribuutti (esimerkiksi onClick tai onFocus), attribuutin arvoksi määritetään metodi, joka kutsutaan kyseisen tapahtuman yhteydessä.

Annettu seuraava koodi:

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

Tee niin, että ensimmäistä painiketta klikkaamalla suoritetaan ensimmäinen funktio, ja toista painiketta klikkaamalla - toinen funktio.