Contactez-nous

Ecouteurs d'événements en JSX (onClick, onChange, onSubmit...)

Apprenez la syntaxe pour attacher des écouteurs d'événements comme onClick, onChange, onSubmit aux éléments DOM dans vos composants React JSX.

Déclarer l'écoute : La syntaxe JSX pour les événements

Pour qu'un composant React puisse réagir à une interaction utilisateur sur un élément DOM spécifique (comme un clic sur un bouton ou une saisie dans un champ), vous devez attacher un écouteur d'événements à cet élément. En React, cela se fait directement dans le JSX, d'une manière très similaire à l'attribut `on` en HTML, mais avec des conventions spécifiques à JSX.

Vous utilisez des props spéciales sur les éléments DOM natifs (comme `

La convention camelCase : `onClick` et compagnie

La première différence clé par rapport au HTML est la convention de nommage : en JSX, les noms des props d'événements sont écrits en camelCase, tandis qu'en HTML, ils sont en minuscules.

  • HTML `onclick` devient JSX `onClick`
  • HTML `onchange` devient JSX `onChange`
  • HTML `onsubmit` devient JSX `onSubmit`
  • HTML `onmouseover` devient JSX `onMouseOver`
  • HTML `onkeydown` devient JSX `onKeyDown`
  • etc.

Cette convention s'aligne sur le style général de nommage en JavaScript.

Passer une fonction comme gestionnaire

La deuxième différence majeure est la valeur que vous passez à ces props d'événements. En HTML, vous passiez souvent une chaîne de caractères contenant du code JavaScript (`onclick="alert('Clic!')"`). En JSX, vous devez passer une référence à une fonction JavaScript (ou une fonction définie en ligne). C'est cette fonction, appelée gestionnaire d'événements (event handler), qui sera exécutée lorsque l'événement se produira.

Vous utilisez les accolades `{}` pour passer la référence de la fonction :

import React, { useState } from 'react';

function BoutonsInteractifs() {
  const [message, setMessage] = useState('Aucune action');

  // Définition des gestionnaires d'événements
  const handlePremierClic = () => {
    setMessage('Premier bouton cliqué !');
  };

  const handleSecondClic = () => {
    setMessage('Second bouton cliqué !');
  };

  const handleSurvol = () => {
    console.log('Survol détecté');
  };

  return (
    

      
{message}

      
      {/* Attache handlePremierClic à l'événement onClick */}
      

      {/* Attache handleSecondClic via une fonction fléchée en ligne */}
      

      {/* Attache handleSurvol à l'événement onMouseOver */}
      

        Survolez-moi !
      


      {/* INCORRECT : Ne pas appeler la fonction directement ici ! */}
      {/*  */}
      {/* Ceci exécuterait handlePremierClic immédiatement au rendu, */}
      {/* et passerait sa valeur de retour (undefined) comme gestionnaire. */}
    

  );
}

export default BoutonsInteractifs;

Il est crucial de passer la fonction elle-même (`handlePremierClic`) ou une fonction qui l'appelle (`() => handleSecondClic()`), et non le résultat de l'appel de la fonction (`handlePremierClic()`), sauf si cette fonction retourne elle-même une autre fonction qui servira de gestionnaire (ce qui est moins courant pour les cas simples).

Evénements courants et leurs props JSX

React prend en charge la plupart des événements DOM standard. Voici quelques-unes des props d'événements les plus couramment utilisées :

  • Evénements de souris : `onClick`, `onContextMenu` (clic droit), `onDoubleClick`, `onMouseDown`, `onMouseEnter`, `onMouseLeave`, `onMouseMove`, `onMouseOut`, `onMouseOver`, `onMouseUp`.
  • Evénements de clavier : `onKeyDown`, `onKeyPress`, `onKeyUp`.
  • Evénements de formulaire : `onChange` (très utilisé pour ``, `