Header Ads Widget

Ticker

6/recent/ticker-posts

Cómo manejar eventos en React

Los elementos React tienen propiedades que se basan en los eventos DOM estándar. Los elementos React pueden disparar los mismos eventos que los elementos DOM habituales. Se nombran usando camelCase, así que no olvide usar esta convención sobre React Elements. Entonces, si desea usar onclick, en realidad será onClick. Esto es bastante similar a cómo, en lugar de usar class, necesita usar className. React maneja * muchos * tipos diferentes de eventos, pero nos ceñiremos a lo básico aquí.


Agregar una propiedad onClick

Por ejemplo, podemos agregar la onClickpropiedad a un botón para manejar un evento. Se establece en las llaves {} porque en React, así es como pasamos una expresión.

Ahora lo que podemos hacer es crear un método por encima del método de renderizado pero por debajo del objeto de estado que puede manejar un evento. La convención es comenzar siempre este tipo de métodos con handle . Entonces el nuestro será handleIncrement (). Todo lo que queremos en este punto es alguna evidencia de que se hizo clic en el botón. Entonces, para empezar, aquí vamos.

También tenga en cuenta que en el elemento del botón ahora estamos pasando una referencia a esa función usando this.handleIncrement . No se llama al método, sino que solo le pasa una referencia a diferencia de lo que vería en JavaScript simple. Ok, es justo, veámoslo en acción.

¡Lo sé, impresionante!


Actualización del estado

Ok, el siguiente objetivo es cambiar el valor de la propiedad de recuento en el objeto de estado cuando se hace clic en el botón. Sin embargo, primero debemos ver la naturaleza a veces confusa de esto en JavaScript. Queremos acceder a ese valor de recuento, por lo que podemos intentar algo como esto.

Intente hacer clic en el botón ahora y verá un error.

Error de tipo no detectado: no se puede leer la propiedad 'estado' de indefinido

¡Esto probablemente te sucederá más de una vez! También puede ser frustrante no saber por qué sucede esto.


Enlazar controladores de eventos en React

Para solucionar esto, necesitamos ver cómo enlazar eventos en React. En JavaScript, el contexto de los thiscambios depende de cómo se llame a una función o método. Hay algunas reglas a tener en cuenta, pero la respuesta corta es que a veces necesitamos vincular esto explícitamente usando el método bind (). Veamos cómo hacer eso.


Constructor y Super

Esta primera forma de evitar este molesto error de tipo no detectado: no se puede leer el 'estado' de la propiedad de error indefinido es agregar un constructor a la clase, junto con una llamada a super (), y luego usar el método bind () como tal.

¡Ah, ja! Ahora podemos acceder al valor contenido en la propiedad count del objeto de estado.

Funciones de flecha como alternativa

La solución anterior usando un constructor, super () y bind () puede volverse tediosa. Esto debe hacerse para cada controlador de eventos, por lo que termina siendo mucho código repetitivo. Otra solución para los problemas de este enlace es utilizar funciones de flecha en su lugar. También hemos actualizado el recuento a 5 para que cuando hagamos la prueba podamos ver un nuevo resultado. Aquí es cómo.

Esta es una buena solución ya que ahora, no es necesario agregar siempre un nuevo bind () en el constructor para cada controlador de eventos. Simplemente asigna una función de flecha a una propiedad de la clase y thisse enlaza correctamente.


Estado de actualización

Ahora que tenemos esto funcionando bien, podemos trabajar en la actualización del estado. Un punto clave para recordar al usar React es no modificar la fecha directamente. En otras palabras, no intente hacer algo como esto.


setState al rescate

Para actualizar el estado en react, puede usar el método setState (). Esto le dice a React que ha habido una actualización del estado, luego React averigua qué parte del DOM necesita actualizar, y lo hace. Algunos de los otros frameworks MVVM populares hacen este paso automáticamente, pero en React, necesitamos hacer uso del método setState () como este.

¡Esto funciona!


El método setState () le dice explícitamente a React que el estado de este componente va a cambiar. Ahora, cuando el método render () finalmente se activa, devuelve un nuevo elemento React con las actualizaciones que se hayan realizado. En este punto, React compara el nuevo y el viejo dom virtual y descubre qué es diferente. Luego actualiza el DOM real con solo los cambios necesarios, no todo el árbol DOM. Esto es lo que hace que el rendimiento sea muy rápido. De hecho, puede ver esto en el navegador si abre las herramientas de desarrollador y simplemente mira lo que está cambiando cuando se actualiza el estado. ¡Muy genial!

Cómo pasar argumentos de eventos

Lo último que podemos ver en este tutorial es cómo pasar un argumento a un evento. Queremos activar onClick con un parámetro. Esto es un poco complicado, por lo que necesitamos un diagrama.
reaccionar pasar argumentos de evento
Para pasar un argumento a un controlador de eventos, podemos usar una función de flecha en línea. Entonces, en lugar de usar esto

Ahora usaremos esto

En el diagrama anterior, esto está representado por el círculo naranja. Ahora observe que a la función de flecha en línea se le pasa un objeto como argumento. Este argumento ahora está disponible para el controlador de eventos handleIncrement. De hecho, en el cuerpo de esa función podemos alertar e.message y, de hecho, estamos viendo el valor de "¡Es viernes!" aparecen en la pantalla.
ejemplo de argumento de evento de paso de reacción


En resumen

Cuando se trata de eventos para elementos de React, podemos adoptar un enfoque similar al de manejar eventos en elementos DOM regulares. Hay un par de diferencias, como que los eventos de React se nombran usando camelCase, y pasa una función como el controlador de eventos, en lugar de una cadena. Cuando se usan clases para definir un componente, un patrón común es que un controlador de eventos sea un método en la clase como lo hicimos en este tutorial.


Publicar un comentario

0 Comentarios