Tutoriel React — Chapitre 10

Plan du chapitre

• 1) Le principe d’un événement en React
• 2) onClick : réagir à un clic
• 3) Créer une fonction “handler” (bonne pratique)
• 4) Passer des paramètres à un handler
• 5) L’objet événement : event / e
• 6) onChange : lire la saisie d’un champ
• 7) Champs contrôlés : la méthode “pro”
• 8) onSubmit : gérer un formulaire
• 9) preventDefault() : éviter le rechargement
• 10) Erreurs fréquentes
• 11) Résumé (à retenir)
• 12) Exercice pratique (débutant)

1) Le principe d’un événement en React

En HTML, vous avez déjà vu des événements (clic, saisie, etc.). En React, c’est très similaire, mais avec une règle importante :

Exemple minimal

export default function App() {
  const handleClick = () => {
    console.log("Clic !");
  };

  return <button onClick={handleClick}>Clique</button>;
}

2) onClick : réagir à un clic

onClick se met sur un élément cliquable (souvent un bouton). Quand l’utilisateur clique, React exécute la fonction.

Avec un state (cas réel)

import { useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Compteur : {count}</p>
      <button onClick={() => setCount((prev) => prev + 1)}>+1</button>
    </div>
  );
}

Ici, l’événement déclenche une mise à jour du state. React re-render et l’affichage change.

3) Créer une fonction “handler” (bonne pratique)

On appelle souvent les fonctions d’événements des handlers : handleClick, handleSubmit, handleChange, etc. Cela rend le code plus lisible.

Pourquoi éviter de tout mettre inline ?

Mettre une grosse fonction directement dans JSX rend le composant difficile à lire. C’est acceptable pour une ligne simple, mais dès que ça grandit, on extrait.

import { useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);

  const handleIncrement = () => {
    setCount((prev) => prev + 1);
  };

  return (
    <div>
      <p>Compteur : {count}</p>
      <button onClick={handleIncrement}>+1</button>
    </div>
  );
}

4) Passer des paramètres à un handler

Parfois, vous voulez “envoyer une valeur” à votre fonction. Exemple : incrémenter de +1, +5, +10 selon le bouton.

Attention à l’erreur classique

Beaucoup de débutants écrivent : onClick={handleAdd(5)} — mais cela appelle la fonction tout de suite au rendu. On veut donner une fonction à React, pas exécuter la fonction immédiatement.

Bonne méthode : fonction fléchée

import { useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);

  const handleAdd = (n) => {
    setCount((prev) => prev + n);
  };

  return (
    <div>
      <p>Compteur : {count}</p>
      <button onClick={() => handleAdd(1)}>+1</button>
      <button onClick={() => handleAdd(5)}>+5</button>
      <button onClick={() => handleAdd(10)}>+10</button>
    </div>
  );
}

5) L’objet événement : event / e

Quand React appelle votre handler, il peut lui fournir un objet “événement” qui décrit ce qui s’est passé (élément ciblé, valeur saisie, etc.). On l’appelle souvent event ou simplement e.

export default function App() {
  const handleClick = (e) => {
    console.log("Type d'événement :", e.type); // "click"
  };

  return <button onClick={handleClick}>Tester</button>;
}

6) onChange : lire la saisie d’un champ

Quand l’utilisateur tape dans un champ, l’événement onChange se déclenche. La valeur tapée est disponible dans e.target.value.

export default function App() {
  const handleChange = (e) => {
    console.log("Valeur :", e.target.value);
  };

  return (
    <div>
      <input type="text" onChange={handleChange} />
    </div>
  );
}

Ici, on lit la valeur et on l’affiche dans la console. Mais en React, on va très souvent la stocker dans le state.

7) Champs contrôlés : la méthode “pro”

Un champ contrôlé signifie : la valeur du champ est contrôlée par le state. En pratique :

• le state contient la valeur
• le champ affiche cette valeur via value={...}
• onChange met à jour le state

import { useState } from "react";

export default function App() {
  const [name, setName] = useState("");

  const handleChange = (e) => {
    setName(e.target.value);
  };

  return (
    <div>
      <label>
        Prénom :
        <input type="text" value={name} onChange={handleChange} />
      </label>

      <p>Vous avez tapé : {name}</p>
    </div>
  );
}

8) onSubmit : gérer un formulaire

Quand un formulaire est envoyé, l’événement onSubmit se déclenche. En React, on met l’handler sur la balise <form>.

import { useState } from "react";

export default function App() {
  const [name, setName] = useState("");
  const [message, setMessage] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault(); // on évite le rechargement
    setMessage(`Bonjour ${name} !`);
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <label>
          Prénom :
          <input
            type="text"
            value={name}
            onChange={(e) => setName(e.target.value)}
          />
        </label>

        <button type="submit">Valider</button>
      </form>

      {message && <p>{message}</p>}
    </div>
  );
}

9) preventDefault() : éviter le rechargement

Par défaut, un formulaire HTML recharge la page lors de l’envoi. Dans une application React (SPA), on ne veut pas ce rechargement. C’est pourquoi on utilise :

e.preventDefault();

10) Erreurs fréquentes

11) Résumé (à retenir)

• Les événements en React : onClick, onChange, onSubmit.
• On passe une fonction à l’événement (pas le résultat de la fonction).
• Pour passer un paramètre : () => handleX(param).
• Les champs contrôlés utilisent value + onChange + state.
• Dans un formulaire, on utilise presque toujours e.preventDefault().

12) Exercice pratique (débutant)

Faites cet exercice dans votre projet React. Il vous fait pratiquer les 3 événements les plus importants.

Partie A — Boutons (onClick)

• Créez un compteur.
• Ajoutez trois boutons : +1, -1, Reset.
• Le bouton Reset remet le compteur à 0.

Partie B — Input contrôlé (onChange)

• Ajoutez un champ “Prénom”.
• Affichez en dessous : “Bonjour {prenom}”.

Partie C — Formulaire (onSubmit)

• Créez un formulaire avec prénom + bouton “Valider”.
• Au submit, affichez un message de confirmation sans recharger la page.
• Pensez à e.preventDefault().