Les événements jouent un rôle essentiel dans la création d'interfaces utilisateur interactives et dynamiques dans React. Dans ce didacticiel, nous allons explorer comment gérer les événements React et répondre efficacement aux actions des utilisateurs.
Gestion des événements dans JSX
React fournit un système d'événements synthétiques qui encapsule les événements du navigateur natif et les normalise sur différents navigateurs. Nous pouvons attacher des gestionnaires d'événements directement aux éléments JSX à l'aide de l' onEventName attribut.
Exemple:
function handleClick() {
console.log("Button clicked!");
}
<button onClick={handleClick}>Click Me</button>
Gestionnaires d'événements et objets d'événement
Lorsqu'un événement est déclenché, React transmet automatiquement un objet événement à la fonction de gestionnaire d'événements. Nous pouvons accéder à cet objet pour obtenir des informations supplémentaires sur l'événement, telles que l'élément cible, les coordonnées de la souris, etc.
Exemple:
function handleMouseOver(event) {
console.log("Mouse coordinates:", event.clientX, event.clientY);
}
<div onMouseOver={handleMouseOver}>Hover over me</div>
Liaison des gestionnaires d'événements
Lorsque vous passez des gestionnaires d'événements en tant qu'accessoires, il est important de les lier à l'instance du composant. Cela garantit que le this contexte correct est maintenu lorsque l'événement est déclenché.
Exemple:
class MyComponent extends React.Component {
handleClick() {
console.log("Button clicked!");
}
render() {
return <button onClick={this.handleClick.bind(this)}>Click Me</button>;
}
}
Propagation des événements et prévention des actions par défaut
React utilise un système d'événements synthétiques qui gère automatiquement la propagation des événements. Pour empêcher le comportement par défaut du navigateur, tel que la soumission de formulaire ou la navigation par lien, nous pouvons appeler la event.preventDefault() méthode.
Exemple:
function handleSubmit(event) {
event.preventDefault();
console.log("Form submitted!");
}
<form onSubmit={handleSubmit}>
<input type="text" />
<button type="submit">Submit</button>
</form>En comprenant comment gérer les événements dans React, vous pouvez créer des interfaces utilisateur interactives et réactives qui répondent de manière transparente aux actions de l'utilisateur.
Voici une liste d'événements courants dans React
1. onClick: Cet événement se produit lorsqu'un élément est cliqué.
Exemple:
<button onClick={handleClick}>Click Here</button> 2. onChange: Cet événement se produit lorsque la valeur d'un élément d'entrée(input, select, textarea) change.
Exemple:
<input type="text" onChange={handleChange} /> 3. onSubmit: Cet événement se produit lorsqu'un formulaire est soumis. Exemple:
<form onSubmit={handleSubmit}>
<input type="text" />
<button type="submit">Submit</button>
</form> 4. onMouseEnter: Cet événement se produit lorsque le pointeur de la souris entre dans un élément.
Exemple:
<div onMouseEnter={handleMouseEnter}>Mouse Enter Here</div> 5. onMouseLeave: Cet événement se produit lorsque le pointeur de la souris quitte un élément.
Exemple:
<div onMouseLeave={handleMouseLeave}>Mouse Leave Here</div> 6. onKeyDown: Cet événement se produit lorsqu'une touche est enfoncée.
Exemple:
<input type="text" onKeyDown={handleKeyDown} /> 7. onKeyUp: Cet événement se produit lorsqu'une touche est relâchée.
Exemple:
<input type="text" onKeyUp={handleKeyUp} /> 8. onFocus: Cet événement se produit lorsqu'un élément reçoit le focus.
Exemple:
<input type="text" onFocus={handleFocus} /> 9. onBlur: Cet événement se produit lorsqu'un élément perd le focus.
Exemple:
<input type="text" onBlur={handleBlur} /> 10. onScroll: Cet événement se produit lorsqu'un élément défile.
Exemple:
<div onScroll={handleScroll}>Scrollable Content</div>
Ce ne sont là que quelques exemples d'événements courants dans React. Vous pouvez utiliser ces événements ou créer des événements personnalisés selon vos besoins dans votre React application.