À Réagir, quelle est la différence entre onChange et onInput?

Question

J'ai essayé de chercher autour pour une réponse à cela, mais la plupart d'entre eux sont en dehors du contexte de Réagir, d'où l' onChange déclenche lors de flou.

En effectuant divers tests, je n'arrive pas à dire comment ces deux événements sont différents (lorsqu'il est appliqué à un textarea). Quelqu'un peut-il éclairer sur ce point?

Answer 1

Il semble qu'il n'y a pas de réelle différence.

Réagir, pour une raison quelconque, s'attache auditeurs de l' Component.onChange pour les DOM element.oninput événement. Voir la note de la documentation sur les formulaires:

Réagir docs - Formes

Il y a plus de gens qui sont surpris par ce comportement. Pour plus de détails, reportez-vous à cette question sur les Réagissent issue tracker:

Document comment Réagir du onChange concerne onInput #3964

Citation de commentaires sur cette question:

Je ne comprends pas pourquoi Réagir choisi de faire onChange se comportent comme des onInput n'. Comme fas que je peux dire, nous n'avons aucun moyen d'obtenir de l'ancienne onChange comportement. Docs que c'est un "abus de langage", mais non, il n'est pas vraiment, il n'feu quand il y a un changement, mais pas jusqu'à l'entrée aussi perd le focus.

Pour la validation, parfois, nous ne voulons pas afficher les erreurs de validation jusqu'à ce qu'ils ont fait de la frappe. Ou peut-être que nous ne voulons pas d'un nouveau rendu sur chaque frappe de touche. Maintenant, la seule façon de le faire est avec onBlur, mais maintenant nous avons aussi besoin de vérifier que la valeur a changé manuellement.

Ce n'est pas que les grandes d'un accord, mais il me semble Réagir jetai un utile événement et dévié de la norme de comportement quand il y avait déjà un événement qui fait cela.

Je suis d'accord à 100% avec le commentaire... Mais je suppose que la modification des il serait apporter plus de problèmes qu'elle n'en résout depuis tellement de code a déjà été écrit, qui s'appuie sur ce problème (et il a également été copié à d'autres cadres, par exemple, Preact).

Réagir n'est pas une partie de la Web officiel de l'API collection

Même si de Réagir est construit sur le haut de JS, et a vu un énorme taux d'adoption, comme une technologie de Réagir existe pour cacher tout un tas de fonctionnalités en vertu de sa propre (assez faible) de l'API. Une fois à l'endroit où cela est évident dans le cas du système, là où il y a beaucoup de choses sous la surface qui est en fait radicalement différent de la norme DOM système d'événements. Pas seulement en termes de laquelle les événements de quoi, mais aussi en termes de lorsque les données est autorisé à se poursuivre à ce stade de la gestion des événements. Vous pouvez en lire plus à ce sujet ici:

Réagir Le Système D'Événements De

Answer 2

Réagir n'a pas le comportement par défaut 'onChange' événement. Le 'onChange' qui nous voir à réagir est le comportement par défaut de l'onInput de l'événement. Donc, pour répondre à votre question, il n'y a pas de différence dans les deux d'entre eux de réagir. J'ai soulevé une question sur GitHub sujet de la même et c'est ce qu'ils ont à dire à ce sujet:

Je pense qu'à l'époque, cette décision a été prise (~4 ans?), onInput ne fonctionne pas de façon uniforme entre les navigateurs, et a été source de confusion pour les gens à venir sur le web à partir d'autres plates-formes, ils attendent l'événement "change" de feu à chaque changement. En cas de Réagir c'est un gros problème parce que si vous ne parvenez pas à gérer le changement assez tôt, le contrôle des entrées ne jamais mettre à jour, ce qui conduit les gens à penser de Réagir est cassé. Ainsi, l'équipe est à l'appelant onChange.

Rétrospectivement, il aurait été une meilleure idée de polyfill onInput et de garder son nom, plutôt que de modifier le comportement d'un autre événement. Mais ce navire a navigué il y a longtemps. Nous pourrions revenir sur cette décision dans le futur, mais je voudrais juste vous encourager à le traiter comme un caprice de Réagir DOM (que vous aurez s'habitue assez rapidement).

https://github.com/facebook/react/issues/9567

Aussi, cet article va fournir plus de perspicacité et une solution de contournement pour défaut 'onChange'

https://www.peterbe.com/plog/onchange-in-reactjs

Answer 3

Récemment, j'ai eu un bug à cause duquel onChange ne permettrait pas à copier et coller dans le champ de saisie sur IE11. Alors que l' onInput événement, permettrait à ce comportement. Je ne pouvais pas trouver toute la documentation qui permettrait de décrire ce dans les docs, mais qui ne montrent qu'il y a une différence entre les deux (attendus ou non).