Manejadores de eventos Curry en React.js - Amit Merchant - Un blog sobre PHP, JavaScript, etc.

Cuando trabaje con componentes de React.js, es posible que se encuentre en una situación en la que usará un controlador de eventos varias veces.

Compruebe lo siguiente, por ejemplo.

import React from 'react';

function MyComponent() {
    handleClick(e, count) {
        console.log(e, count)
    }

    render() {
        return(
            <div>
                <a onClick={(e) => handleClick(e, 1)}>Clicked once</a>
                <a onClick={(e) => handleClick(e, 2)}>Clicked twice</a>
                <a onClick={(e) => handleClick(e, 3)}>Clicked thrice</a>
            </div>
        );
    }
}

Como puedes ver tenemos un componente funcional llamado <MyComponent /> y dentro de este componente hay algunos enlaces que incluyen onClick el evento está vinculado por un controlador handleClick.

Aviso, pasamos en el evento e y contar como argumentos para ese controlador.

Entonces, si lo usa en varios lugares, este tipo de implementación se vuelve bastante complicada ya que estamos usando la función de flecha y pasando el evento cada vez que llamamos al controlador.

Hay un pequeño truco genial que aprendí de este video de Fireship.io que puede hacer que esto sea mucho más conciso y un poco más limpio.

El gerente de curry

La idea aquí es usar una técnica llamada curry donde podemos devolver una función de una función.

¿Suena confuso? Reescribamos el ejemplo anterior con la técnica del curry para darte una mejor idea.

import React from 'react';

function MyComponent() {
    handleClick(count) {
        return (e) => console.log(e, count);
    }

    render() {
        return(
            <div>
                <a onClick={handleClick(1)}>Clicked once</a>
                <a onClick={handleClick(2)}>Clicked twice</a>
                <a onClick={handleClick(3)}>Clicked thrice</a>
            </div>
        );
    }
}

Como puedes ver, el handleClick ahora es una función curry que devuelve otra función. Esta función maneja el evento que se pasa por defecto a esta función interna. Por lo tanto, no necesitamos pasar explícitamente el evento al llamar al controlador.

Además, además de eso, no necesitamos usar la función de flecha al llamar al controlador. ¡Así que hace que las cosas sean mucho más limpias como resultado!

Si quieres conocer otros artículos parecidos a Manejadores de eventos Curry en React.js - Amit Merchant - Un blog sobre PHP, JavaScript, etc. puedes visitar la categoría Código.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas