Un événement React, c’est ce qui se passe quand l’utilisateur interagit avec une page (clique, tape, survole, soumet…).
React permet de réagir à ces interactions en exécutant du code JavaScript.
En pratique
| Action Utilisateur | Événement React | Quand l’utiliser |
|---|---|---|
| Cliquer sur un bouton | onClick | Boutons, liens, icônes |
| Taper dans un champ | onChange | Inputs, textarea, select |
| Soumettre un formulaire | onSubmit | Balise form |
| Survoler un élément | onMouseEnter / onMouseLeave | Effets de hover |
| Appuyer sur une touche | onKeyDown / onKeyUp | Raccourcis clavier |
Exemple
function Bouton() {
const cliquer = () => {
alert('Tu as cliqué !');
};
return <button onClick={cliquer}>Clique-moi</button>;
}
Ce qui se passe :
- L’utilisateur clique → 2. React détecte le
onClick→ 3. La fonctioncliquers’exécute
Les 2 pièges à connaître
| Erreur | Correction |
|---|---|
| onclick (minuscules) | onClick (camelCase) |
| onClick= »cliquer() » (guillemets + parenthèses) | onClick={cliquer} (accolades, pas de parenthèses) |