Gestion des événements : onClick et onChange

Objectif : gérer les clics et les changements de texte à l’aide des événements synthétiques de React, pour obtenir un comportement cohérent dans les différents navigateurs.

• onClick déclenche des actions
• onChange lit les valeurs des champs
• L’objet événement contient les détails

Associez un gestionnaire : onClick={handle}. Gardez les fonctions courtes ; mettez l’état à jour avec les fonctions de mise à jour (préférez la fonction de mise à jour fonctionnelle si vous utilisez la valeur précédente).

onChange se déclenche lorsque l’utilisateur modifie un champ. Lisez le texte depuis event.target.value et faites de l’état l’unique source de vérité.

Démonstration : incrémentez lors d’un clic, reflétez la saisie avec onChange et empêchez le rechargement du formulaire avec event.preventDefault().

Les événements synthétiques enveloppent les événements natifs pour assurer leur cohérence. Lisez les valeurs dans le gestionnaire ; gardez les gestionnaires courts et ciblés.

• Utilisez event.preventDefault() pour les formulaires
• Utilisez event.target.value pour les champs

Conseils :

• Ne modifiez pas directement le DOM ; laissez l’état piloter l’interface.
• Évitez la logique complexe directement dans les gestionnaires : appelez de petites fonctions.
• Utilisez la fonction de mise à jour fonctionnelle lorsque vous utilisez l’état précédent.

Résumé : utilisez onClick pour les actions et onChange pour les champs ; lisez les valeurs depuis event.target.value ; empêchez le rechargement par défaut des formulaires lorsque nécessaire.