Gebeurtenissen toevoegen in JSX

Laten we nu de werking met gebeurtenissen in React bestuderen. Laten we bijvoorbeeld ervoor zorgen dat er bij een klik op een blok een alert verschijnt met een bepaalde tekst.

Stel we hebben een functie showMess, die een alert met een bericht toont, en in de HTML code is er een knop, waarop we bij een klik deze alert willen zien:

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

Laten we aan onze knop de gebeurtenis onclick koppelen, zodat bij een klik op deze div de functie showMess wordt uitgevoerd. Hiervoor moet het attribuut onClick worden toegevoegd (precies in camelCase, dus onClick, niet onclick), en daarin de functie opgeven die wordt uitgevoerd bij deze gebeurtenis:

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

Zo werkt de omgang met gebeurtenissen: er wordt een attribuut toegevoegd (bijvoorbeeld onClick of onFocus), als waarde van het attribuut wordt de methode opgegeven die bij deze gebeurtenis wordt aangeroepen.

Gegeven de volgende code:

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

Zorg ervoor dat bij een klik op de eerste knop de eerste functie wordt uitgevoerd, en bij een klik op de tweede knop - de tweede functie.