Utiliser l'événement onChange dans React

La propriété onChange de React permet à un composant de réagir aux modifications effectuées dans les contrôles d’un formulaire. Un gestionnaire lit la valeur du contrôle modifié et met à jour l’état qui détermine la valeur affichée. onChange dans React n’est pas simplement l’attribut HTML natif onchange : React gère les changements de formulaire avec son système d’événements, dont le comportement est adapté aux contrôles React.

Utilisez un champ contrôlé lorsque le composant doit gérer la valeur actuelle du formulaire, la valider ou la réutiliser ailleurs dans l’interface. Le principe consiste à transmettre une valeur d’état au contrôle, puis à mettre cet état à jour dans son gestionnaire onChange.

Comprendre l’événement onChange

Associez un gestionnaire à un champ de saisie, à une zone de texte ou à une liste déroulante avec la propriété JSX onChange. Pour les champs texte et les listes déroulantes, lisez event.target.value ; pour les cases à cocher, lisez la valeur booléenne event.target.checked. Le gestionnaire met ensuite à jour l’état associé au contrôle.

Dans un contrôle de formulaire contrôlé, la valeur affichée provient de l’état. Lorsque le gestionnaire met cet état à jour, React affiche le contrôle avec sa nouvelle valeur. L’interface et les données du composant restent ainsi synchronisées. Choisissez un contrôle non contrôlé si le composant n’a pas besoin d’en gérer la valeur pendant l’interaction.

Implémenter onChange avec des champs texte

Pour un champ texte, stockez une chaîne dans l’état, transmettez-la avec value et mettez-la à jour à partir de l’événement. Dans un composant de classe dont l’état contient name, le contrôle JSX peut s’écrire ainsi : <input value={this.state.name} onChange={event => this.setState({ name: event.target.value })} />. La mise à jour de l’état fait suivre au texte affiché chaque modification. Conservez une chaîne comme valeur d’état pendant toute la durée de vie du champ.

Le code JavaScript exécutable ci-dessous isole la logique des gestionnaires pour un champ texte, une case à cocher et une liste déroulante. Il utilise de petites fonctions de mise à jour d’état pour montrer quelle propriété de l’événement lit chaque gestionnaire ; il n’affiche pas de contrôles React. Les lignes JSX de cet article montrent comment relier ces valeurs à des contrôles React contrôlés. Les libellés visibles dans les blocs de code et de sortie restent en anglais, car ces blocs sont conservés à l’identique.

let name = '';
let subscribed = false;
let category = 'books';

const setName = (value) => { name = value; };
const setSubscribed = (value) => { subscribed = value; };
const setCategory = (value) => { category = value; };

const handleNameChange = (event) => setName(event.target.value);
const handleSubscribedChange = (event) => setSubscribed(event.target.checked);
const handleCategoryChange = (event) => setCategory(event.target.value);

handleNameChange({ target: { value: 'Ada' } });
handleSubscribedChange({ target: { checked: true } });
handleCategoryChange({ target: { value: 'music' } });

console.log(`Name: ${name}`);
console.log(`Subscribed: ${subscribed}`);
console.log(`Category: ${category}`);

Name: Ada
Subscribed: true
Category: music

Dans un composant React, les fonctions de mise à jour de l’illustration exécutable correspondent à des mises à jour d’état. La valeur affichée par le contrôle provient de cet état, ce qui permet à React de synchroniser la vue et les données.

Utiliser les cases à cocher

Une case à cocher représente un choix booléen : contrôlez donc sa sélection avec checked et lisez event.target.checked dans son gestionnaire. Dans un composant de classe, une case à cocher peut utiliser checked={this.state.subscribed} et onChange={event => this.setState({ subscribed: event.target.checked })}. La propriété value de la case correspond à la valeur envoyée avec le formulaire ; elle n’indique pas si l’utilisateur l’a sélectionnée.

Utiliser onChange avec des listes déroulantes

Pour un contrôle de type liste déroulante, transmettez l’état de la sélection avec value et lisez le nouveau choix dans event.target.value. Par exemple, utilisez <select value={this.state.category} onChange={event => this.setState({ category: event.target.value })}><option value="books">Books</option><option value="music">Music</option></select>. La valeur de l’option est la donnée stockée dans l’état ; elle peut différer du libellé affiché. La mise à jour de l’état fait suivre à l’option sélectionnée et aux éléments d’interface qui en dépendent la même source de vérité.

Bonnes pratiques pour utiliser onChange

Limitez le rôle des gestionnaires à la lecture de l’événement et à la mise à jour de l’état concerné. Placez la validation en fonction des besoins du formulaire : par exemple, validez pendant la saisie pour fournir un retour immédiat, ou à l’envoi si des indications durant la saisie risquent de distraire. Assurez-vous que la propriété value et l’état associé utilisent le même type, et utilisez checked pour l’état d’une case à cocher.

La temporisation, ou debouncing, peut être utile lorsqu’un gestionnaire lance une opération coûteuse, comme filtrer un grand jeu de données ou envoyer une requête de recherche. Elle retarde la réponse et n’empêche pas automatiquement les rendus de React ; utilisez-la seulement si l’opération et l’expérience utilisateur y gagnent. Mettre à jour l’état contrôlé à chaque frappe est une pratique courante.

Modifier par programmation la valeur DOM d’un champ est un cas avancé. Affecter directement une valeur ne garantit pas à lui seul que React détectera le changement ou appellera le gestionnaire attendu. Privilégiez la mise à jour de l’état qui contrôle le champ. Si du code externe doit interagir avec un contrôle de formulaire, utilisez si possible l’interface publique du composant et vérifiez le comportement dans cette intégration ; des noms d’utilitaires comme setNativeValue ne désignent pas des API générales de React et ne garantissent pas de solution.

Conclusion

Les gestionnaires onChange de React relient les modifications de l’utilisateur à l’état du composant. Lisez value pour les champs texte et les listes déroulantes, et checked pour les cases à cocher ; affichez ensuite les contrôles contrôlés à partir de l’état mis à jour. Adaptez la validation et la temporisation aux besoins du formulaire au lieu d’en faire des règles systématiques.

Foire aux questions

1. À quoi sert onChange dans React ? Il appelle un gestionnaire lorsqu’un contrôle de formulaire change, afin que le composant puisse lire la nouvelle valeur et mettre à jour ses données ou son état.

2. Comment gérer un champ texte ? Transmettez une valeur d’état de type chaîne à la propriété value du champ, puis mettez cet état à jour avec event.target.value dans onChange.

3. Comment gérer une case à cocher ? Contrôlez-la avec un état booléen transmis à checked, puis mettez cet état à jour à partir de event.target.checked.

4. Comment gérer une liste déroulante ? Définissez sa propriété value à partir de l’état, puis mettez cet état à jour avec event.target.value lorsque la sélection change.

5. Faut-il temporiser chaque gestionnaire onChange ? Non. Envisagez une temporisation lorsque le gestionnaire lance une opération coûteuse ; elle n’est pas nécessaire pour chaque mise à jour d’état et ne garantit pas une réduction du nombre de rendus.

6. Pourquoi une modification programmatique de la valeur peut-elle ne pas appeler mon gestionnaire ? Affecter directement une valeur DOM ne déclenche pas nécessairement la gestion des changements de React. Mettez à jour l’état qui contrôle le champ ou utilisez l’interface prise en charge par le composant.