Utiliser l'événement onChange dans React

1. onChange avec les entrées React
2. Déclencher l’événement onChange dans React manuellement

Le système d’événements est l’une des fonctionnalités les plus utiles incluses dans le framework React.

L’événement onChange, en particulier, est l’un des événements les plus fréquemment gérés dans React. Il est basé sur l’attribut onchange bien connu dans JavaScript vanille, mais l’événement onChange dans React inclut quelques fonctionnalités supplémentaires.

Il est également écrit en camelCase pour aider les développeurs à le différencier des événements JavaScript réguliers.

Comprendre comment fonctionne exactement l’événement onChange peut vous aider à rédiger des formulaires plus puissants et dynamiques.

onChange avec les entrées React

Dans React, l’événement onChange se produit lorsque l’entrée des utilisateurs change de quelque manière que ce soit. Une entrée peut changer lorsque l’utilisateur entre du texte supplémentaire, sélectionne une option différente, décoche la case ou d’autres instances similaires.

Imaginez une situation où vous avez une entrée de case à cocher et devez stocker le choix des utilisateurs (une valeur booléenne) dans l’état. Dans ce scénario, onChange serait extrêmement utile. Chaque fois que l’utilisateur change d’avis sur l’entrée et la décoche, l’état sera mis à jour.

Voici un exemple :

return (
		<input type="checkbox" onChange={(e) => this.setState("status": e.target.value)}/> 
		)

Il s’agit d’une simple démonstration de l’utilité d’un événement onChange.

Nous faisons de cet élément une entrée contrôlée en stockant la valeur d’entrée dans notre composant state. Ce terme décrit des entrées dont l’état interne est fusionné avec le composant state de la réaction pour fournir une source unique de vérité.

Notez que dans JSX, les expressions JavaScript doivent être placées entre deux accolades. Nous pourrions également définir le gestionnaire séparément et l’invoquer entre les accolades.

Par exemple:

<input type="checkbox" onChange={(e) => handleChange(e)}/> 

Pour des fonctions de gestionnaire plus complexes, ce serait une approche plus lisible.

Déclencher l’événement onChange dans React manuellement

Dans certains cas, vous devrez peut-être contourner le comportement par défaut et déclencher manuellement l’événement onChange.

Imaginez que le navigateur remplisse automatiquement votre mot de passe, de sorte que le onChange ne se déclenche pas, mais vous en avez besoin pour effectuer une animation. Dans ce scénario, vous devez déclencher onChange manuellement.

Pour éviter les instances en double des mêmes événements, parfois React avale intentionnellement certains événements et ne les exécute pas. La solution consiste à utiliser le paramètre de valeur natif setNativeValue() . Pour mieux comprendre le problème, consultez ce article de blog utile.