Trabajar con eventos en React

La mayor parte del comportamiento en una aplicación gira en torno a eventos. ¿El usuario ingresa un valor en el formulario de registro? Evento. ¿El usuario presiona el botón enviar? Otro evento. Los eventos se desencadenan de varias maneras y creamos aplicaciones para escucharlos y poder hacer algo más en respuesta.

Es posible que ya se sienta muy cómodo trabajando con eventos basados ​​en su experiencia existente en JavaScript. Sin embargo, React tiene una forma distinta de manejarlos. En lugar de apuntar directamente a eventos DOM, React los envuelve en su propio contenedor de eventos. Pero entraremos en eso.

Repasemos cómo crear, agregar y escuchar eventos en React.

Creando eventos

Comenzaremos creando un formulario que tenga una entrada y un botón. Se activará un evento cuando se ingrese un valor. El botón se utiliza para llamar a una función que invertirá ese valor.

Así es como funcionará:

• Un campo de entrada vacío permite al usuario ingresar texto.
• Se activa un onChangeevento cuando se ingresan valores en la entrada. Esto llama a una función — handleChange()— que se utiliza para establecer un nuevo estado para la entrada.
• Cuando se hace clic en el botón “Invertir texto”, se activa otro evento. Esto llama a una función — handleReverse()— para establecer un nuevo estado para reversedText.

Aquí está eso traducido al código:

Learning Redux – Chris Nwamba provides a nice overview for event handling in React in the second part of this series