javascript - inputs - react label
En React, ¿cuál es la diferencia entre onChange y onInput? (4)
Parece que no hay diferencia real
Reaccionar, por alguna razón, asocia oyentes para
Component.onChange
al evento DOM
element.oninput
.
Vea la nota en los documentos sobre formularios:
Hay más personas que están sorprendidas por este comportamiento. Para obtener más detalles, consulte este problema en el rastreador de problemas de React:
Documente cómo se relaciona onChange de React con onInput # 3964
Cita de los comentarios sobre ese tema:
No entiendo por qué React eligió hacer que onChange se comporte como lo hace onInput. Por lo que puedo decir, no tenemos forma de recuperar el viejo comportamiento de OnChange. Los doctores afirman que es un "nombre inapropiado", pero no lo es realmente, se dispara cuando hay un cambio, solo no hasta que la entrada también pierde el foco.
Para la validación, a veces no queremos mostrar errores de validación hasta que hayan terminado de escribir. O tal vez simplemente no queremos volver a renderizar en cada pulsación de tecla. Ahora, la única forma de hacerlo es con onBlur, pero ahora también debemos verificar que el valor haya cambiado manualmente.
No es un gran problema, pero me parece que React descartó un evento útil y se desvió del comportamiento estándar cuando ya había un evento que hace esto.
Estoy 100% de acuerdo con el comentario ... Pero supongo que cambiarlo ahora traería más problemas de los que resuelve ya que ya se ha escrito mucho código que se basa en este comportamiento (y también se ha copiado a otros marcos, por ejemplo, Preact ) .
React no es parte de la colección oficial de API web
A pesar de que React está construido sobre JS y ha visto una gran tasa de adopción, ya que existe una tecnología React para ocultar una gran cantidad de funcionalidades bajo su propia API (bastante pequeña). Una vez que el área donde esto es obvio es en el sistema de eventos, donde están sucediendo muchas cosas debajo de la superficie que en realidad son radicalmente diferentes del sistema de eventos DOM estándar. No solo en términos de qué eventos hacen qué, sino también en términos de cuándo se permite que los datos persistan en qué etapa del manejo de eventos. Puedes leer mas al respecto aquí:
Intenté buscar una respuesta para esto, pero la mayoría de ellos están fuera del contexto de React, donde
onChange
dispara al desenfocar.
Al realizar varias pruebas, parece que no puedo decir cómo estos dos eventos son diferentes (cuando se aplican a un área de texto). ¿Alguien puede arrojar algo de luz sobre esto?
Como puede ver en varios comentarios aquí, React trata a onChange y onInput de la misma manera, en lugar de debatir los méritos de esta decisión. Aquí está la solución.
Use onBlur cuando no desee procesar las ediciones del usuario hasta que hayan terminado. :)
React no tiene el comportamiento del evento predeterminado ''onChange''. El ''onChange'' que vemos en reaccionar tiene el comportamiento del evento predeterminado ''onInput''. Entonces, para responder a su pregunta, no hay diferencia entre ambos en reaccionar. He planteado un problema en GitHub con respecto a lo mismo y esto es lo que tienen que decir al respecto:
Creo que en el momento en que se tomó esta decisión (¿hace ~ 4 años?), OnInput no funcionaba de manera consistente entre los navegadores, y era confuso para las personas que ingresan a la web desde otras plataformas, ya que esperarían que el evento de "cambio" disparar a cada cambio. En el caso de React, es un problema mayor porque si no logra manejar el cambio lo suficientemente pronto, las entradas controladas nunca se actualizan, lo que lleva a las personas a pensar que React está roto. Así que el equipo decidió llamarlo en Cambiar.
En retrospectiva, podría haber sido una mejor idea rellenar PolyInput y mantener su nombre en lugar de cambiar el comportamiento de otro evento. Pero ese barco ha navegado hace mucho tiempo. Podríamos volver a visitar esta decisión en el futuro, pero te animo a que la trates como una peculiaridad de React DOM (a la que te acostumbrarás bastante rápido).
https://github.com/facebook/react/issues/9567
Además, este artículo proporcionará más información y una solución alternativa para ''onChange'' predeterminado
Recientemente recibí un error en el que
onChange
no permitía copiar y pegar en el campo de entrada en IE11.
Mientras que el evento
onInput
permitiría ese comportamiento.
No pude encontrar ninguna documentación que describiera esto en los documentos, pero eso muestra que hay una diferencia entre los dos (esperado o no).