Utilice el evento onChange en React

1. onChange con entradas React
2. Activar el evento onChange en React manualmente

El sistema de eventos es una de las características más útiles incluidas en el marco de React.

El evento onChange, en particular, es uno de los eventos que se manejan con más frecuencia en React. Se basa en el conocido atributo onchange en JavaScript vanilla, pero el evento onChange en React incluye algunas características adicionales.

También está escrito en camelCase para ayudar a los desarrolladores a diferenciarlo de los eventos regulares de JavaScript.

Comprender cómo funciona exactamente el evento onChange puede ayudarlo a escribir formularios más potentes y dinámicos.

onChange con entradas React

En React, el evento onChange ocurre cuando la entrada de los usuarios cambia de alguna manera. Una entrada puede cambiar cuando el usuario ingresa texto adicional, selecciona una opción diferente, desmarca la casilla de verificación u otras instancias similares.

Imagine una situación en la que tiene una entrada de casilla de verificación y necesita almacenar la elección de los usuarios (un valor booleano) en el estado. En este escenario, onChange sería de gran utilidad. Cada vez que el usuario cambia de opinión sobre la entrada y la desmarca, el estado se actualizará.

He aquí un ejemplo:

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

Esta es una simple demostración de lo útil que puede ser un evento onChange.

Estamos haciendo de este elemento una entrada controlada almacenando el valor de entrada en nuestro componente. Este término describe entradas cuyo estado interno se fusiona con el state del componente react para proporcionar una única fuente de verdad.

Tenga en cuenta que en JSX, las expresiones de JavaScript deben colocarse entre dos llaves. También podríamos definir handler por separado e invocarlo entre llaves.

Por ejemplo:

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

Para funciones de controlador más complejas, este sería un enfoque más legible.

Activar el evento onChange en React manualmente

En algunos casos, es posible que deba omitir el comportamiento predeterminado y activar el evento onChange manualmente.

Imagine que el navegador rellena automáticamente su contraseña, por lo que onChange no se activa, pero lo necesita para realizar una animación. En este escenario, debe activar onChange manualmente.

Para evitar instancias duplicadas de los mismos eventos, a veces React ingiere intencionalmente algunos eventos y no los ejecuta. La solución es utilizar el definidor de valores nativos setNativeValue(). Para comprender en profundidad el problema, consulte esta útil publicación de blog.