Dans React, quelle est la différence entre onChange et onInput?
J'ai essayé de chercher une réponse à cela, mais la plupart d'entre eux sont en dehors du contexte de React, où onChange se déclenche après le flou.
En effectuant divers tests, je n'arrive pas à dire en quoi ces deux événements sont différents (lorsqu'ils sont appliqués à une zone de texte). Quelqu'un peut-il nous éclairer?
Il semble qu'il n'y ait pas de réelle différence.
React, pour une raison quelconque, attache des écouteurs pour Component.onChange à l'événement DOM element.oninput. Voir la note dans la documentation sur les formulaires:
Il y a plus de gens qui sont surpris par ce comportement. Pour plus de détails, reportez-vous à ce problème dans le suivi des problèmes de React:
Documentez le lien entre React's onChange et onInput # 3964
Citation des commentaires sur cette question:
Je ne comprends pas pourquoi React a choisi de faire en sorte que onChange se comporte comme onInput. Autant que je sache, nous n’avons aucun moyen de retrouver l’ancien comportement onChange. Les médecins affirment que c'est un "abus de langage", mais ce n'est pas le cas, il se déclenche quand il y a un changement, mais pas tant que l'entrée ne perd pas le focus.
Pour la validation, nous ne souhaitons parfois pas afficher les erreurs de validation avant la fin de la frappe. Ou peut-être que nous ne voulons tout simplement pas un re-rendu sur chaque frappe. À présent, la seule façon de procéder consiste à utiliser onBlur, mais nous devons également vérifier que la valeur a été modifiée manuellement.
Ce n'est pas un gros problème, mais il me semble que React a jeté un événement utile et dévié du comportement standard alors qu'il y avait déjà un événement qui le fait.
Je suis d'accord à 100% avec le commentaire ... Mais je suppose que le changer maintenant poserait plus de problèmes qu'il n'en résoudrait, car de nombreux codes qui reposent sur ce comportement ont déjà été écrits (et ils ont également été copiés dans d'autres cadres, par exemple Préactivez ).
React ne fait pas partie de la collection officielle de l'API Web
Même si React est construit sur JS et a connu un taux d'adoption énorme, en tant que technologie, React permet de masquer de nombreuses fonctionnalités sous sa propre API (relativement petite). Une fois que cela est évident, c'est dans le système des événements, où beaucoup d'activités souterraines sont radicalement différentes du système d'événements standard du DOM. Pas seulement en termes de quels événements font quoi, mais également en termes de date à laquelle les données sont autorisées à persister à quelle étape de la gestion des événements. Vous pouvez en savoir plus à ce sujet ici:
React n'a pas le comportement d'événement par défaut 'onChange'. Le 'onChange' que nous voyons dans react a le comportement de l'événement 'onInput' par défaut. Donc, pour répondre à votre question, il n’ya aucune différence entre les deux. J'ai soulevé une question sur GitHub concernant la même chose et voici ce qu'ils ont à dire à ce sujet:
Je pense qu’au moment où cette décision a été prise (il y a environ 4 ans?), OnInput ne fonctionnait pas de manière uniforme entre les navigateurs et était source de confusion pour les internautes venant d’autres plateformes, car ils s’attendaient à ce que le feu à chaque changement. En cas de réaction, le problème est plus grave car, si vous ne gérez pas le changement suffisamment tôt, les entrées contrôlées ne sont jamais mises à jour, ce qui amène les gens à penser que React est défectueux. L'équipe est donc allée l'appeler onChange.
Rétrospectivement, il aurait peut-être été préférable de polyfiller onInput et de conserver son nom plutôt que de modifier le comportement d'un autre événement. Mais ce navire a navigué il y a longtemps. Nous reviendrons peut-être sur cette décision à l’avenir, mais je vous encourage simplement à la traiter comme un caprice de DOM React (auquel vous vous habituerez assez rapidement).
https://github.com/facebook/react/issues/9567
Cet article fournira également plus d'informations et une solution de contournement pour le paramètre 'onChange' par défaut.
Récemment, j'ai eu un bug où onChange n'autorisait pas le copier-coller dans le champ de saisie sur IE11. Considérant que l'événement onInput permettrait ce comportement. Je n'ai trouvé aucune documentation décrivant cela dans la documentation, mais cela montre qu'il existe une différence entre les deux (attendu ou non).
Comme vous pouvez le voir dans divers commentaires ici, React traite onChange et onInput de la même manière, plutôt que de débattre des avantages de cette décision. Voici la solution.
Utilisez onBlur lorsque vous ne souhaitez pas traiter les modifications de l'utilisateur tant qu'elles ne sont pas terminées. :)