React Events : Gérez les Interactions Utilisateur

Qu'est-ce qu'un Événement React ?

Un événement React est une action déclenchée par l'utilisateur ou le système, telle qu'un clic, un changement de texte, ou un soumission de formulaire. Contrairement aux événements DOM natifs, React utilise un système de gestion d'événements synthétisé pour garantir une compatibilité croisée entre navigateurs.

Voici un exemple simple où un bouton affiche une alerte lorsqu'il est cliqué :

📋 Copier le code

function BoutonClick() {
function handleClick() {
alert("Bouton cliqué !");
}

return (
<button onClick={handleClick}>
Cliquez ici
</button>
);
}

ReactDOM.render(<BoutonClick />, document.getElementById('root'));

Explication :

• function BoutonClick() : Définit un composant fonctionnel appelé BoutonClick.
• function handleClick() : Une fonction qui affiche une alerte lorsque le bouton est cliqué.
• <button onClick={handleClick}> : Associe la fonction handleClick à l'événement onClick du bouton.

Comment Gérer les Événements dans React ?

Pour gérer un événement dans React, vous devez associer une fonction de rappel (callback) à l'attribut correspondant de l'élément JSX. Voici comment cela fonctionne :

1. Événements Courants

Voici quelques événements couramment utilisés dans React :

• onClick : Détecte un clic sur un élément.
• onChange : Détecte un changement dans un champ de saisie (par exemple, une entrée utilisateur).
• onSubmit : Détecte la soumission d'un formulaire.

2. Exemple : Événement onClick

Voici un exemple où un clic sur un bouton met à jour l'état d'un compteur :

📋 Copier le code

import React, { useState } from 'react';

function Compteur() {
const [compte, setCompte] = useState(0);

function incrementer() {
setCompte(compte + 1);
}

return (
<div>
<p>Vous avez cliqué {compte} fois.</p>
<button onClick={incrementer}>
	Cliquez ici
</button>
</div>
);
}

ReactDOM.render(<Compteur />, document.getElementById('root'));

Explication détaillée :

1. import React, { useState } from 'react'; :
   • Nous importons React et le hook useState pour gérer l'état local.
2. const [compte, setCompte] = useState(0); :
   • Initialise l'état compte avec la valeur 0.
   • setCompte est une fonction permettant de mettre à jour cet état.
3. function incrementer() { setCompte(compte + 1); } :
   • Cette fonction incrémente la valeur de compte de 1 lorsqu'elle est appelée.
4. <button onClick={incrementer}> :
   • Lorsque le bouton est cliqué, la fonction incrementer est exécutée, mettant à jour l'état.

3. Exemple : Événement onChange

L'événement onChange est utilisé pour détecter les modifications dans un champ de saisie. Voici un exemple :

📋 Copier le code

import React, { useState } from 'react';

function SaisieTexte() {
const [texte, setTexte] = useState("");

function handleChange(event) {
setTexte(event.target.value);
}

return (
<div>
<input type="text" value={texte} onChange={handleChange} />
<p>Vous avez écrit : {texte}</p>
</div>
);
}

ReactDOM.render(<SaisieTexte />, document.getElementById('root'));

Explication détaillée :

1. const [texte, setTexte] = useState(""); :
   • Initialise l'état texte avec une chaîne vide.
   • setTexte est une fonction pour mettre à jour cet état.
2. function handleChange(event) :
   • Cette fonction est appelée chaque fois que l'utilisateur modifie le contenu du champ de saisie.
   • event.target.value récupère la valeur actuelle du champ de saisie.
3. <input type="text" value={texte} onChange={handleChange} /> :
   • value={texte} lie la valeur du champ de saisie à l'état texte.
   • onChange={handleChange} associe la fonction handleChange à l'événement onChange, qui est déclenché à chaque modification de texte.

4. Exemple : Événement onSubmit

L'événement onSubmit est utilisé pour gérer la soumission de formulaires. Voici un exemple :

📋 Copier le code

import React, { useState } from 'react';

function Formulaire() {
const [nom, setNom] = useState("");

function handleSubmit(event) {
event.preventDefault(); // Empêche le rechargement de la page
alert(`Bonjour, ${nom} !`);
}

function handleChange(event) {
setNom(event.target.value);
}

return (
<form onSubmit={handleSubmit}>
<label>
	Entrez votre nom :
	<input type="text" value={nom} onChange={handleChange} />
</label>
<button type="submit">Envoyer</button>
</form>
);
}

ReactDOM.render(<Formulaire />, document.getElementById('root'));

Explication détaillée :

1. const [nom, setNom] = useState(""); :
   • Initialise l'état nom avec une chaîne vide.
2. function handleSubmit(event) :
   • Cette fonction est appelée lorsque le formulaire est soumis.
   • event.preventDefault() empêche le comportement par défaut du navigateur (rechargement de la page).
   • alert(`Bonjour, ${nom} !`) affiche un message personnalisé contenant la valeur de nom.
3. function handleChange(event) :
   • Met à jour l'état nom avec la valeur saisie dans le champ de texte.
4. <form onSubmit={handleSubmit}> :
   • Associe la fonction handleSubmit à l'événement onSubmit du formulaire.

Gestion des Événements avec des Composants Basés sur des Classes

Avant l'introduction des hooks, les événements étaient souvent gérés dans des composants basés sur des classes. Voici un exemple :

📋 Copier le code

class BoutonClick extends React.Component {
constructor(props) {
super(props);
this.state = { compte: 0 };
this.incrementer = this.incrementer.bind(this); // Lie la fonction au contexte "this"
}

incrementer() {
this.setState({ compte: this.state.compte + 1 });
}

render() {
return (
<div>
	<p>Vous avez cliqué {this.state.compte} fois.</p>
	<button onClick={this.incrementer}>
		Cliquez ici
	</button>
</div>
);
}
}

ReactDOM.render(<BoutonClick />, document.getElementById('root'));

Explication détaillée :

1. this.incrementer = this.incrementer.bind(this); :
   • Ceci lie explicitement la fonction incrementer au contexte this du composant.
2. this.setState({ compte: this.state.compte + 1 }); :
   • Met à jour l'état compte en incrémentant sa valeur de 1.
3. <button onClick={this.incrementer}> :
   • Lorsque le bouton est cliqué, la fonction incrementer est appelée, mettant à jour l'état.

Meilleures Pratiques pour Gérer les Événements

Pour écrire des gestionnaires d'événements efficaces et maintenables, voici quelques conseils :

• Évitez les fonctions anonymes directement dans JSX : Par exemple, préférez onClick={this.handleClick} à onClick={() => this.handleClick()} pour des performances optimales.
• Utilisez toujours event.preventDefault() pour les formulaires : Cela empêche le comportement par défaut du navigateur lors de la soumission d'un formulaire.
• Privilégiez les composants fonctionnels : Avec les hooks, ils offrent une syntaxe plus concise et performante pour gérer les événements.

Conclusion

Vous avez maintenant appris à gérer différents types d'événements dans React, y compris onClick, onChange, et onSubmit. En combinant état et événements, vous pouvez créer des interfaces utilisateur interactives et dynamiques.

Prochain chapitre : Accédez à Render HTML avec React