Guía para la gestión de eventos de React

Los eventos generalmente representan algún tipo de interacción entre el usuario y la aplicación: cada vez que un usuario hace clic en el objeto, escribe en el campo de entrada, arrastra o suelta s...

Introducción

Los eventos suelen representar algún tipo de interacción entre el usuario y la aplicación: cada vez que un usuario hace clic en el objeto, escribe en el campo de entrada, arrastra o suelta algún elemento, etc. Por lo tanto, cada evento suele requerir algún tipo de reacción de la aplicación. Cada vez que ocurre un evento significativo, nosotros, como programadores, podemos definir una función utilizada para responder al evento ocurrido. Esas funciones se denominan controladores de eventos y son el núcleo de la gestión de eventos en cualquier lenguaje de programación. Gestión de eventos es un conjunto de técnicas utilizadas para manejar eventos.

¡Reaccionar no es diferente! En esta guía, profundizaremos en el concepto de gestión de eventos en React. Echaremos un vistazo a varios tipos diferentes de eventos, así como a los mecanismos utilizados para manejar esos eventos.

Diferencias entre DOM y React Event Handling {#differences betweendomandreacteventhandling}

Si está utilizando React, probablemente ya esté familiarizado con los eventos DOM en JavaScript:

1
2
3
4
<!- JavaScript event ->
<button onclick="handleClick()">
    Trigger Function
</button>

Este es el evento DOM onclick. Cuando se hace clic en este botón de ejemplo, se llama a la función handleClick(); ese es el principio básico de la gestión de eventos. Esa idea básica la comparten JavaScript y React, pero hay un par de matices que los diferencian.

En primer lugar, hay una pequeña diferencia en el nombre del evento: React usa nombres camel case en lugar de nombres minúsculas que usa JavaScript. Después de un vistazo rápido al ejemplo anterior, notará que el nombre del evento es onclick, y la alternativa de React es onClick. Además, React utiliza JSX (JavaScript XML), lo que nos permite pasar una función como controlador de eventos (dentro de llaves) en lugar de una cadena:

1
2
3
4
<!- React event ->
<button onClick={handleClick}>
    Trigger Function
</button>

{.icon aria-hidden=“true”}

Tenga en cuenta que no llamamos a la función handleClick entre corchetes: llamarla {handleClick()} llamará a la función del controlador cada vez que se representa un elemento. La sintaxis que hemos usado garantiza que la función del controlador se llame solo cuando el evento esté registrado.

A menudo, se encontrará en una situación en la que desea evitar el comportamiento predeterminado después de registrar el evento. Por ejemplo, el evento JavaScript onsubmit se registra después de que un usuario hace clic en el botón Enviar. El comportamiento predeterminado es enviar los datos del formulario correctamente y volver a cargar la página web, pero es posible que debamos evitar que se vuelva a cargar la página. JavaScript tiene un truco útil para prevenir el comportamiento predeterminado bajo la manga:

1
2
3
<form onsubmit="console.log('You clicked submit.'); return false">
    <button type="submit">Submit</button>
</form>

Hemos definido la función del controlador de la forma habitual, pero observe cómo hemos agregado return false después de la definición de la función del controlador. Esa es la forma en que los desarrolladores de JavaScript evitan el comportamiento predeterminado al manejar eventos. Si no coloca return false después de la función de controlador en este ejemplo, la página se volverá a cargar antes de que la consola tenga la oportunidad de registrar el mensaje.

{.icon aria-hidden=“true”}

Nota: Se puede definir una función de controlador de eventos en un archivo JavaScript y llamar en HTML cuando se detecta un evento. Alternativamente, también puede definir y llamar a la función del controlador directamente en código HTML (como puede ver en el ejemplo anterior).

¡React simplemente no es compatible con este truco! Para evitar el comportamiento predeterminado en React, debe llamar explícitamente a preventDefault:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
function Form() {
    function handleSubmit(e) {
        e.preventDefault();
        console.log("You clicked submit.");
    }

    return (
        <form onSubmit={handleSubmit}>
            <button type="submit">Submit</button>
        </form>
    );
}

Tal vez no sea tan simple como el manejo de eventos en JavaScript, pero ciertamente es una forma más robusta de manejar eventos. Este ejemplo ilustra el manejo de eventos en uso con un componente funcional en React. Simplemente declaramos una función de controlador en el componente y la llamamos dentro del método return().

{.icon aria-hidden=“true”}

Nota: React se encarga de la compatibilidad entre navegadores, ¡así que no tienes que preocuparte por eso!

Manejo de eventos en componentes funcionales {#manejo de eventos en componentes funcionales}

El controlador de eventos se pasa como un atributo a un elemento o componente en un componente funcional. Cuando el usuario interactúa con el elemento, este atributo recibe una función que describe lo que sucede.

Gestión del evento onClick

Si el usuario hace clic en el elemento varias veces, se activa el evento onClick y se llama a la función varias veces, como cualquier otro evento. Veamos cómo se ve esto en la práctica, crearíamos un botón y llamaríamos a una función:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
const App = () => {
    const handleClick = () => {
        console.log("This function has been triggered!");
    };

    return (
        <div className="App">
            <h1>Hello World</h1>
            <button onClick={handleClick}>Trigger Function</button>
        </div>
    );
};

Esto cerrará la sesión "¡Esta función se ha activado!" en la consola.

Pasar parámetros a eventos {#pasar parámetros a eventos}

Si queremos pasar parámetros o valores a la función que se está disparando, debemos usar una función de flecha o una función real. En nuestro caso, digamos que queremos pasar un valor a la función y luego registrarlo en la consola:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
const App = () => {
    const handleClick = (name) => {
        console.log("My Name is:", name);
    };
    return (
        <div className="App">
            <h1>Hello World</h1>
            <button onClick={() => handleClick("John Doe")}>
                Trigger Function
            </button>
        </div>
    );
};

Esto mostrará “Mi nombre es: John Doe” en la consola. También podemos hacer uso de una función real usando la palabra clave function y todo seguirá funcionando perfectamente:

1
<button onClick={function(){handleClick('John Doe')}}>Trigger Function</button>

Gestión del evento onSubmit

También podemos manejar eventos de envío de formularios con React cuando un usuario hace clic en el botón Enviar o toca la tecla Intro en el teclado. Esto se maneja de manera similar al evento onClick:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
const App = () => {
    const handleSubmit = () => {
        console.log("The submit button was clicked!");
    };

    return (
        <div className="App">
            <h1>Hello World</h1>
            <form onSubmit={handleSubmit}>
                <label>Name</label>
                <input type="text" />
                <button type="submit">Submit</button>
            </form>
        </div>
    );
};

"¡Se hizo clic en el botón Enviar!" se cerrará como resultado de esto. Sin embargo, debido a que el navegador se recargará inmediatamente, usaremos el método preventDefault() para evitar que el navegador realice la acción predeterminada.

1
2
3
4
const handleSubmit = (e) => {
    e.preventDefault();
    console.log("The submit button was clicked!");
};

Manejo de eventos en componentes de clase

Los componentes de clase manejan eventos de manera similar a los componentes funcionales, con algunas diferencias menores. Vamos a crear un botón que llama a la función handleClick cuando se hace clic:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
class App extends React.Component {
    handleClick = () => {
        console.log("This function has been triggered!");
    };
    render() {
        return (
            <div className="App">
                <h1>Hello World</h1>
                <button onClick={this.handleClick}>Trigger Function</button>
            </div>
        );
    }
}

{.icon aria-hidden=“true”}

Nota: Tenemos que usar la palabra clave this porque estamos en la clase App, y handleClick es una de las funciones miembro de esa clase.

Pasar parámetros a eventos {#pasar parámetros a eventos}

Es una buena práctica declarar la función del controlador como un método dentro del componente de clase. Si desea pasar parámetros, accesorios o estados al componente renderizado más tarde, debe vincular la función de manejo de eventos a this dentro del constructor.

Digamos que tenemos un conjunto de valores de estado que queremos cambiar cuando se hace clic en un botón específico y queremos usar el parámetro pasado, tendríamos algo como esto, pero arrojaría un error:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            title: "Welcome, We are glad you are here!"
        };
    }

    handleClick = (name) => {
        console.log("This function has been triggered!", name);
        this.setState({
            title: `Hello ${name}!`
        });
    };
    render() {
        return (
            <div className="App">
                <h1>{this.state.title}</h1>
                <button onClick={this.handleClick("Joel")}>
                    Trigger Function
                </button>
            </div>
        );
    }
}

Para resolver el problema, usamos funciones de flecha o Función.prototipo.bind] para enlazar la palabra clave this:

1
2
<button onClick={() => this.handleClick("John Doe")}>Trigger Function</button>
<button onClick={this.handleClick.bind(this, "John Doe")}>Trigger Function</button>

Gestión del evento onSubmit

También podemos manejar todo tipo de eventos con componentes de clase, siempre que usemos la palabra clave this en lugar de función al declarar los métodos:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
class App extends React.Component {
    handleSubmit = (e) => {
        e.preventDefault();
        console.log("The submit button was clicked!");
    };
    render() {
        return (
            <div className="App">
                <h1>Hello World</h1>
                <form onSubmit={this.handleSubmit}>
                    <label>Name</label>
                    <input type="text" />
                    <button type="submit">Submit</button>
                </form>
            </div>
        );
    }
}

Conclusión

Hemos visto en esta guía que los eventos de React son muy similares a los eventos de JavaScript, con algunas diferencias en la sintaxis y el comportamiento de propagación. También aprendimos la distinción entre los controladores de eventos utilizados en componentes funcionales y de clase, con el componente de clase que requiere el enlace de los controladores a this. Hay muchos más eventos que se pueden manejar en React, pero todos funcionan de la misma manera que el método onClick, ya sea en un componente funcional o de clase. de clase.