Série Mastery React – Jour 9: Manipulation d'événements dans Réaction – rendre les applications interactives

Bienvenue chez React Mastery Series! Dans l'article précédent, nous avons exploré React Reendering and Component Lifecycle. Nous avons appris: ce qui provoque une remise d'un composant Comment fonctionne la réconciliation de la réaction La différence entre le rendu et les mises à jour DOM Comment le comportement du cycle de vie est géré en utilisant Hooks Now apprenons comment les applications React répondent aux interactions utilisateur. Chaque application moderne dépend d'événements : Cliquez sur les boutons Dactylographier dans des formulaires Sélection des options Soumettre des données Effacer les éléments Raccourcis clavier React fournit un système d'événements puissant pour gérer toutes ces interactions. Qu'est-ce que la manipulation d'événements? Le traitement des événements est le processus de réponse aux actions des utilisateurs dans une application. Exemples: Exemple: Un utilisateur clique sur le bouton "Transferter de l'argent": Événements dans JavaScript traditionnel vs Réagir JavaScript traditionnel Vous manuellement : Trouvez l'élément DOM Joindre les auditeurs d'événements Gérer les mises à jour React React attache les événements directement à l'intérieur de JSX. React gère l'enregistrement de l'événement en interne. React Event Syntax React events use: camelCase name JSX expressions Function references HTML: React: Notice: Handling Click Events Exemple: Quand l'utilisateur clique: Passing Functions vs Calling Functions Une erreur débutante très courante. Erreur Ceci s'exécute immédiatement pendant le rendu. Correct React appelle la fonction seulement lorsque l'événement se produit. Transmettre des arguments aux gestionnaires d'événements Parfois, vous devez transmettre des informations supplémentaires. Exemple: Incorrect: Correct: La fonction flèche retarde l'exécution jusqu'à ce que le clic arrive. L'Event Object React fournit automatiquement un objet event. Exemple: Utilisation: L'objet de l'événement contient des informations sur: Élément cible Type d'événement Position de la souris Détails du clavier Informations du formulaire Événements synthétiques dans Réaction n'utilise pas directement les événements du navigateur. React fournit plutôt un emballage appelé SynthétiqueEvent Exemple: Sortie: Pourquoi React utilise-t-il des événements synthétiques? Bénéfices: Constance du navigateur croisé