Bind en las clases de ES6 de JavaScript

Publicado por Iván Gajate el 21 de septiembre de 2019 en Desarrollo Web, Eventos, JavaScript

Respuesta corta:

// Utilizo bind para vincular la función con el scope this
this.onClick = this.onClick.bind(this);

Respuesta larga:

Al pasar el manejador del evento como un callback, se pierde el ámbito, de tal manera que la función se ejecuta correctamente, pero dentro de ella se cree que this es el propio botón (la etiqueta html <button>). Cuando realmente nosotros esperamos que this sea la propia clase.

Para solucionarlo basta con reasignar en el propio constructor el scope que debe tener esa función.

this.onClick = this.onClick.bind(this);

y nuestra clase funcionará como esperamos:

class Foo{
 
  constructor(){
    this.onClick = this.onClick.bind(this);
    // Listener del boton
    document.getElementById('button').addEventListener('click', this.onClick);
  }
 
  onClick(){
    console.log(this); // Foo {...}
    // Ahora puedo remover el listener sin problema
    document.getElementById('button').removeEventListener('click', this.onClick);
  }
 
}
 
var foo = new Foo();

Una muy buena referencia y explicado con más detalle: https://www.freecodecamp.org/news/this-is-why-we-need-to-bind-event-handlers-in-class-components-in-react-f7ea1a6f93eb/

 

Deja un comentario

*