06 — Gestion des événements

🔍 Événements en React vs HTML

HTML natifReact (JSX)
onclick="maFonction()"onClick={maFonction}
Nom en minusculesNom en camelCase
String avec ()Référence de fonction (sans parenthèses !)
// ❌ HTML classique
<button onclick="handleClick()">Clic</button>

// ✅ React JSX
<button onClick={handleClick}>Clic</button>
//                 ^         ^
//                 pas de () ni de guillemets
⚠️ Attention : onClick={handleClick()} avec les parenthèses exécute la fonction immédiatement au rendu ! On passe une référence, pas un appel.

📐 Les événements courants

ÉvénementSe déclenche quand…Éléments typiques
onClickClic sur l'élémentbutton, div, a…
onChangeValeur modifiéeinput, select, textarea
onSubmitFormulaire soumisform
onMouseEnterSouris entreTout élément
onMouseLeaveSouris sortTout élément
onKeyDownTouche presséeinput, textarea
onKeyUpTouche relâchéeinput, textarea
onFocusÉlément reçoit le focusinput, button…
onBlurÉlément perd le focusinput, button…
onDoubleClickDouble-clicTout élément

📌 L'objet événement (SyntheticEvent)

React enveloppe les événements natifs dans un SyntheticEvent compatible cross-browser :

function MonInput() {
    const handleChange = (e) => {
        // e = SyntheticEvent (wrapper React)
        console.log(e.target.value);   // Valeur de l'input
        console.log(e.target.name);    // Attribut name
        console.log(e.type);           // "change"
        console.log(e.nativeEvent);    // L'événement DOM natif
    };

    return <input onChange={handleChange} name="prenom" />;
}

Propriétés courantes du SyntheticEvent :

🎯 Passer des arguments à un handler

function ListeBoutons() {
    const handleClick = (nom) => {
        alert(`Tu as cliqué sur ${nom}`);
    };

    return (
        <div>
            {/* Méthode 1 : Fonction fléchée inline */}
            <button onClick={() => handleClick('Alice')}>Alice</button>

            {/* Méthode 2 : bind */}
            <button onClick={handleClick.bind(null, 'Bob')}>Bob</button>
        </div>
    );
}

// Si on veut aussi l'événement :
const handleClick = (nom, e) => {
    console.log(nom, e.target);
};
<button onClick={(e) => handleClick('Alice', e)}>Alice</button>

🔄 preventDefault et formulaires

function MonFormulaire() {
    const handleSubmit = (e) => {
        e.preventDefault(); // Empêche le rechargement de la page
        console.log("Formulaire soumis !");
    };

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

🚀 Démo interactive

▼ Tester différents types d'événements

📝 Résumé

← 05 — State 07 — Rendu conditionnel →