Gestion des événements en JSX

Étudions maintenant le travail avec les événements sur React. Par exemple, faisons en sorte qu'un clic sur un bloc affiche une alert avec un certain texte.

Supposons que nous ayons une fonction showMess, qui affiche une alert avec un message, et que dans le code HTML il y ait un bouton, sur lequel nous aimerions voir cette alert au clic :

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

Attachons à notre bouton l'événement onclick de sorte qu'un clic sur ce div déclenche la fonction showMess. Pour cela, il faut ajouter l'attribut onClick (précisément en camelCase, c'est-à-dire onClick, et non onclick), et y spécifier la fonction qui s'exécutera lors de cet événement :

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

C'est ainsi que se passe le travail avec les événements : on ajoute un attribut (par exemple, onClick ou onFocus), et on indique comme valeur de l'attribut la méthode qui sera appelée lors de cet événement.

Voici le code suivant :

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

Faites en sorte qu'un clic sur le premier bouton déclenche la première fonction, et qu'un clic sur le deuxième bouton déclenche la deuxième fonction.