Événements (React)

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 :

  1. L’utilisateur clique → 2. React détecte le onClick → 3. La fonction cliquer s’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)
Les contenus de définition restent publics. Les ressources (outils, grilles, supports) liées à cette fiche sont disponibles dans l’espace membre.