Gestion des événements dans ReactJS

Salut à toi, futurs développeurs React ! Aujourd'hui, nous plongeons dans le monde passionnant de la gestion des événements dans ReactJS. En tant que votre enseignant de science informatique du coin, je suis ravi de vous guider dans cette aventure. Ne vous inquiétez pas si vous êtes nouveau dans la programmation - nous allons commencer par les bases et progresser pas à pas. Alors, prenez une tasse de café (ou de thé, si c'est votre truc), et c'est parti !

Gestion des événements dans ReactJS

Les événements sont la vie des applications web interactives. Ils sont comme les boutons et les leviers dans le cockpit d'une navette spatiale - ils font bouger les choses ! Dans ReactJS, la gestion des événements est la manière dont nous gérons les interactions des utilisateurs comme les clics, les appuis sur les touches et les soumissions de formulaires.

Imaginez que vous construisez un simple jeu de clic. Chaque fois que l'utilisateur clique sur un bouton, vous voulez augmenter un score. C'est là que la gestion des événements devient pratique !

Événements synthétiques React

Avant de plonger dans le code, parlons de quelque chose d'unique à React : les événements synthétiques. Ce sont la manière de React de s'assurer que les événements fonctionnent de manière cohérente à travers différents navigateurs. C'est comme avoir un traducteur universel pour votre application !

React enveloppe les événements natifs du navigateur et leur donne une interface cohérente. Cela signifie que vous n'avez pas à vous soucier des particularités spécifiques aux navigateurs lors de la gestion des événements.

Ajout d'un événement

Commençons par un exemple simple. Nous allons créer un bouton qui, lorsque vous cliquez dessus, affichera une alerte.

function AlertButton() {
return (
<button onClick={() => alert('You clicked me!')}>
Click me!
</button>
);
}

Dans cet exemple :

• Nous définissons un composant fonctionnel appelé AlertButton.
• À l'intérieur du composant, nous retournons un élément <button>.
• Nous ajoutons un attribut onClick au bouton. C'est ainsi que nous attachons un écouteur d'événement dans React.
• L'attribut onClick est défini pour une fonction fléchée qui appelle alert() avec notre message.

Lorsque vous rendez ce composant et cliquez sur le bouton, une alerte s'ouvrira en disant "You clicked me!".

Gestion d'un événement

Maintenant, rendons les choses un peu plus intéressantes. Au lieu de simplement afficher une alerte, nous allons mettre à jour l'état du composant lorsque le bouton est cliqué.

import React, { useState } from 'react';

function ClickCounter() {
const [count, setCount] = useState(0);

const handleClick = () => {
setCount(count + 1);
};

return (
<div>
<p>You've clicked {count} times</p>
<button onClick={handleClick}>
Click me!
</button>
</div>
);
}

Décomposons cela :

1. Nous importons useState de React pour gérer l'état de notre composant.
2. Nous définissons un composant fonctionnel appelé ClickCounter.
3. À l'intérieur du composant, nous utilisons useState(0) pour créer une variable d'état count initialisée à 0, et une fonction setCount pour la mettre à jour.
4. Nous définissons une fonction handleClick qui appelle setCount pour incrémenter le compteur.
5. Dans notre JSX, nous affichons le compteur actuel et un bouton.
6. L'attribut onClick du bouton est défini pour notre fonction handleClick.

Chaque fois que vous cliquez sur le bouton, le compteur augmentera de 1 !

Passage d'arguments à un gestionnaire d'événement

Parfois, vous pourriez vouloir passer des informations supplémentaires à votre gestionnaire d'événement. Regardons un exemple où nous avons plusieurs boutons, chacun associé à un fruit différent.

import React, { useState } from 'react';

function FruitPicker() {
const [selectedFruit, setSelectedFruit] = useState('');

const handleFruitClick = (fruit) => {
setSelectedFruit(fruit);
};

return (
<div>
<h2>Pick a fruit:</h2>
<button onClick={() => handleFruitClick('Apple')}>Apple</button>
<button onClick={() => handleFruitClick('Banana')}>Banana</button>
<button onClick={() => handleFruitClick('Cherry')}>Cherry</button>
<p>You selected: {selectedFruit}</p>
</div>
);
}

Dans cet exemple :

1. Nous créons une variable d'état selectedFruit pour suivre le fruit choisi.
2. Notre fonction handleFruitClick prend un paramètre fruit.
3. Dans chaque bouton's onClick attribut, nous utilisons une fonction fléchée pour appeler handleFruitClick avec le nom du fruit approprié.

Lorsque vous cliquez sur un bouton, il mettra à jour l'état selectedFruit avec le nom du fruit que vous avez cliqué.

Événements communs React

Voici un tableau de certains événements communs React que vous pourriez utiliser :

Nom de l'événement	Description
onClick	Déclenché lorsque l'élément est cliqué
onChange	Déclenché lorsque la valeur d'un élément d'entrée change
onSubmit	Déclenché lorsque un formulaire est soumis
onMouseEnter	Déclenché lorsque la souris entre dans un élément
onMouseLeave	Déclenché lorsque la souris quitte un élément
onKeyDown	Déclenché lorsque une touche est pressée
onKeyUp	Déclenché lorsque une touche est relâchée
onFocus	Déclenché lorsque l'élément reçoit le focus
onBlur	Déclenché lorsque l'élément perd le focus

Souvenez-vous, ces événements sont en camelCase dans React, contrairement à leurs homologues HTML en minuscules.

Et voilà, les amis ! Vous avez刚刚 fait vos premiers pas dans le monde de la gestion des événements dans React. Pratiquez avec ces exemples, essayez de combiner différents concepts, et bientôt vous serez créer des applications interactives React comme un pro !

Souvenez-vous, en programmation, comme dans la vie, la clé est de continuer à expérimenter et à apprendre. N'ayez pas peur de faire des erreurs - ce sont des pierres d'achoppement vers le succès. Bon codage, et que la React soit avec vous !

Credits: Image by storyset