TypeScript / React – eventos

Bienvenidos sean a este post, hoy veremos como manejar eventos.

En el post anterior vimos como son las propiedades para un componente y hoy nos centraremos en como manejar los eventos para los mismos. Para ello necesitaremos del proyecto creado en el post anterior, sino lo poseen les dejo un link para descargarlo:

Extraigan el directorio en el PC y ya esta listo para usarse. Nuestro primer paso sera ir a MiBoton.tsx en el directorio src y modificaremos la interfaz de la siguiente manera:

export interface IMiBotonProps {
        nombreBoton: string;
        manejadorClick(): void;
}

Simplemente agregamos el prototipo de una funcion para manejar el evento del click en el boton. Lo siguiente sera modificar la clase de MiBoton de la siguiente manera:

export class MiBoton extends React.Component<IMiBotonProps> {
        constructor(props: IMiBotonProps) {
                super(props);
                this.onBotonApretado = this.onBotonApretado.bind(this);
        }
        render() {
                return (
                  <Button color="primary"
                        onClick={this.onBotonApretado}>
                        {this.props.nombreBoton}
                  </Button>
                )
        }
        onBotonApretado() {
                console.log("MiBoton.onBotonApretado() llamado");
                this.props.manejadorClick();
        }
}

En este caso primero agregamos un constructor. Este recibira un valor del tipo de la interfaz para el props, luego lo usaremos para iniciar a props en la interfaz y lo siguiente sera trabajar con el metodo onBotonApretado. Donde almacenaremos el resultado de utilizar a bind, el cual usaremos para unir correctamente este metodo a este objeto. Lo proximo sera agregar el escuchador para el evento click al elemento Button y le asociaremos una funcion. Lo siguiente es agregar la definicion para esta funcion donde solamente mostrara un mensaje del log de la consola pero lo asociaremos mediante props a la declaracion de la funcion de la interfaz. Con esto realizado nuestro siguiente paso sera ir a App.tsx y modificaremos el codigo de la siguiente manera:

import React from 'react';
import './App.css';
import { MiBoton } from './MiBoton';

export interface IAppProps { };
class App extends React.Component<IAppProps> {
        constructor(props: IAppProps) {
                super(props);
                this.manejarClick=this.manejarClick.bind(this);
        }
        render() {
          return (
                <MiBoton
                        nombreBoton="Haz click"
                        manejadorClick={this.manejarClick}/>
          )
        }
        manejarClick() {
                console.log("App.manejarClick fue llamado");
        }
}

export default App;

La primera modificacion es agregar una interfaz para las propiedades de la clase App pero la dejaremos en blanco porque no necesitaremos nada. Luego haremos que el Component de la clase sea del tipo de la interfaz anterior. Dentro primero definiremos un constructor para hacer algo similar al otro archivo, donde iniciaremos a props mediante super y luego mediante bind asociaremos la funcion manejarClick al objeto actual, sobre esta funcion hablaremos en un momento. La siguiente modificacion es agregar la propiedad de la funcion de la interfaz IMiBotonProps para asociarlo a la funcion para manejar el click en este objeto. Si observan es el mismo nombre que usamos en el constructor. Nuestro ultimo paso sera definir a esta funcion y esta solo muestra un mensaje en el log de la consola. Si lo prueban debe funcionar de la siguiente manera:

Como pueden ver en el video al momento de hacer click en el boton nos mostro los dos llamados a las funciones tanto en el elemento del archivo como en el importado. Como pueden ver es un poco mas complicado pero de una manera muy practica se pueden manejar eventos en los elementos de react. Antes de finalizar les dejo un link para descargar los archivos del proyecto y los modificados en este post:

En resumen, hoy hemos visto como manejar eventos en nuestros componentes, como aplicarlos, como iniciarlos, asi como tambien debemos unirlos a la funcion pertinente, y todo en un ejemplo muy simple para verlo. Espero les haya resultado de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.