📘 Chapitre – Réagir aux événements utilisateur

1. 🎯 Objectif pédagogique

Apprendre à gérer les événements utilisateur (clics, saisies, survols, soumissions de formulaire) dans React et à déclencher des mises à jour d’état ou des actions.

2. 📚 Concepts abordés

• Gestion des événements avec la syntaxe JSX (onClick, onChange, onSubmit)
• Utilisation des fonctions fléchées et des callbacks
• Mise à jour de l’état via useState en réponse aux événements
• Prévention du comportement par défaut (event.preventDefault())
• Événements de formulaire et champs contrôlés

3. 🧠 Explication théorique

Les événements en React sont similaires au JavaScript classique, mais avec une syntaxe camelCase et une fonction comme valeur :

<button onClick={maFonction}>Cliquez ici</button>

Pour passer des arguments, utiliser une fonction fléchée :

<button onClick={() => handleClick("Alice")}>Salut</button>

Champs contrôlés

Un champ d’entrée dont la valeur est synchronisée avec un état React :

const [nom, setNom] = useState("");
<input value={nom} onChange={(e) => setNom(e.target.value)} />

4. 🛠 Tutoriel pratique

Résumé du travail : Créer un composant formulaire simple qui réagit à la saisie utilisateur.

Arborescence projet :

react-demo/
 ├── src/
 │   ├── App.jsx
 │   └── Formulaire.jsx

Étape 1 : Créer Formulaire.jsx

import { useState } from 'react';

function Formulaire() {
  const [nom, setNom] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`Bonjour ${nom} !`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>Votre nom :</label>
      <input
        type="text"
        value={nom}
        onChange={(e) => setNom(e.target.value)}
      />
      <button type="submit">Envoyer</button>
    </form>
  );
}

export default Formulaire;

Étape 2 : Utiliser le composant dans App.jsx

import Formulaire from './Formulaire';

function App() {
  return (
    <div>
      <h1>Réagir aux événements</h1>
      <Formulaire />
    </div>
  );
}

export default App;

Étape 3 : Ajouter un bouton avec un événement onClick

<button onClick={() => alert("Clic détecté !")}>Cliquez-moi</button>

Étape 4 : Ajouter un champ contrôlé supplémentaire

const [email, setEmail] = useState("");
<input
  type="email"
  value={email}
  onChange={(e) => setEmail(e.target.value)}
/>

5. 🧾 Résumé et points-clés

• Les événements React utilisent des noms camelCase : onClick, onChange.
• Les champs contrôlés sont synchronisés avec un state via value et onChange.
• e.preventDefault() empêche le rechargement d’une page lors de la soumission d’un formulaire.
• Les fonctions fléchées facilitent le passage d’arguments dans les gestionnaires d’événements.