Manejadores de eventos con React


handling event react

El manejo de eventos en React es muy parecido a como lo hacemos normalmente con Javascript, aunque este ultimo suele utilizar oyentes como “addEventListener()” en elementos del DOM en espera de, como su nombre lo indica, ocurra algún evento, con React no funciona de esta forma, el oyente se incluye al elemento cuando se añade el evento.

Este articulo forma parte del Curso de React, puedes acceder al código de ejemplo de este articulo desde el repositorio de Github.

Preparando el camino

Vamos a abrir nuestro archivo “main.jsx”, borramos el ejemplo que vimos en el tema anterior y empecemos uno nuevo, donde vamos a crear un componte llamado “Button” el cual va a renderizar un botón sencillo.-

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import React from 'react';
import ReactDOM from 'react-dom';

class Button extends React.Component
{
// Código para renderizar
render()
{
return (
<div>
<h1>Bienvenidos a Codeando</h1>
<button>
mi boton
</button>
</div>
);
};
};

// Renderizamos el componente
const rootElement = document.getElementById('root');
const element = <Button />;

ReactDOM.render(element, rootElement);

Al renderizar el botón mostrará el texto “mi boton”, vamos a cambiar este texto por un estado, el cual mostrar el número 0 (lo hacemos con la finalidad de crear un contador), entonces declaramos el estado mediante el constructor de la clase.-

1
2
3
4
5
6
constructor(props){
super(props);
this.state = {
count: 0
}
}

Y actualizamos nuestro método render cambiando el texto “mi boton” por el estado que declaramos, quedando de esta forma.-

1
2
3
4
5
6
7
8
9
10
11
render()
{
return (
<div>
<h1>Bienvenidos a Codeando</h1>
<button>
{ this.state.count }
</button>
</div>
);
};

Listo ya tenemos nuestro componente preparado para pasar al siguiente subtema donde empezaremos a trabajar con los manejadores de eventos.

Manejador de eventos (Handling Events)

En React un manejador o controlador de eventos es un método de nuestro componente, pero no esta vinculado con este, es decir, dentro del método (manejador) no podremos acceder al scope (this) del componente.

Empecemos creando nuestro método el cual actualizara el estado del componente aumentando en uno la propiedad “count”.-

1
2
3
4
5
6
7
// Manejador de evento de nuestro boton
handleClick ()
{
this.setState((prevState) => ({
count: (prevState.count + 1)
}));
}

prevState hace referencia al estado del componente tal y como estaba antes de la llamada el método setState(), es ideal si queremos modificar el estado con base a este mismo.

Note que para poder acceder al método setState() necesitamos acceder al scope (this) del componente, para lograrlo debemos enlazar el método con el componente y lo podemos hacer en el constructor del mismo mediante el método bind() como se muestra a continuación.-

1
this.handleClick = this.handleClick.bind(this);

Nuestro constructor queda de la siguiente forma.-

1
2
3
4
5
6
7
8
9
10
constructor(props){
super(props);
// Estado del componente
this.state = {
count: 0
}

// Enlazamos el manejador de eventos con el componente
this.handleClick = this.handleClick.bind(this);
}

Ahora vamos a añadir el manejador de eventos a nuestro elemento “button” por medio de la interpolación.-

1
2
3
4
5
...
<button onClick={this.handleClick}>
...
</button>
...

Si corremos nuestra aplicación veremos en pantalla un boton con el texto 0, que al hacer clic en el. el 0 aumentara en 1 y así susesivamente.

Comportamiento por defecto

Al igual que en Javascript, React puede anular el comportamiento por defecto de un elemento del DOM como un enlace, basta con añadir el método preventDefault() en el manejador del evento como se muestra a continuación.-

1
2
3
4
5
6
7
8
// Manejador de evento de nuestro boton
handleClick (e)
{
e.preventDefault();
this.setState((prevState) => ({
count: (prevState.count + 1)
}));
}

Note que en la linea 2 nuestro manejador recibe como parámetro el objeto generado por el evento y en la linea 4 utilizamos el método preventDefault() para impedir que el enlace se ejecute y de esta forma continuar con el código dentro del manejador.

Para ver su funcionamiento, también debemos cambiar el elemento “button” por el elemento “a”.-

1
2
3
4
5
...
<a href="#" onClick={this.handleClick}>
...
</a>
...

Conclusiones

El manejo de eventos es muy importante en React, ya que parte de su funcionalidad es permitirnos crear la comunicación entre componentes, existen diversos eventos que nos serán de gran utilidad y puedes consultarlos en eventos Javascript.

Puedes encontrar el código de ejemplo de este articulo en.-

Si te interesa el tema puedes continuar con los siguientes enlaces.-

Que tengan feliz código.


Te fue de utilidad el articulo, ayudanos a compartir para que a más personas les resulte util!

Te interesa el tema, recibe los nuevos articulos directamente en tu email.-