Gestion des événements -Event Handling en React

La gestion des événements en React permet de réagir aux interactions utilisateur (clics, saisies, soumissions, etc.).

Elle suit une syntaxe proche du HTML mais avec des spécificités JSX pour s’intégrer au système de rendu de React.

Les 3 Règles d’Or (Différences HTML vs React)

Exemple click bouton

function MonBouton() {
  // Définition de la fonction
  const handleClick = () => {
    console.log('Bouton cliqué !');
  };

  return (
    // Correct : On passe la fonction (sans parenthèses)
    <button onClick={handleClick}>
      Cliquer
    </button>
  );
}

Submission Formulaire (Avec prévention)

function MonFormulaire() {
  const handleSubmit = (e) => {
    e.preventDefault(); // Indispensable pour éviter le rechargement
    console.log('Formulaire soumis');
  };

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Envoyer</button>
    </form>
  );
}

Événement avec Argument

function Liste() {
  const supprimer = (id) => {
    console.log(`Suppression de ${id}`);
  };

  return (
    // Correct : On utilise une fonction fléchée pour passer l'argument
    <button onClick={() => supprimer(123)}>
      Supprimer
    </button>
  );
}

Pièges Courants à Éviter

Appeler la fonction directement dans le JSX :

// ERREUR : La fonction s'exécute pendant le rendu (boucle infinie possible)
<button onClick={handleClick()}>Cliquer</button>

// CORRECT : On passe la référence
<button onClick={handleClick}>Cliquer</button>

Oublier e.preventDefault() sur les formulaires :

// La page se recharge annulant l'effet React
<form onSubmit={() => console.log('Submit')}>

// Le formulaire ne recharge pas la page
<form onSubmit={(e) => { e.preventDefault(); console.log('Submit'); }}>

Confondre onChange et onClick :

• onClick → Pour les boutons, liens, divs.
• onChange → Pour les inputs, selects, textareas (quand la valeur change).