¿Por qué es necesario usar bind en los event listener de los components?

Entiende la razón de usar bind en los event listener de un componente de React

Image for post
Image for post
class AwesomeComponent extends React.Component{
constructor( props ){
super( props );
this.onClick = this.onClick.bind(this);
}
onClick(event){
// ...
}
render(){
return (
<button type="button"
onClick={this.onClick}>
Click
</button>
);
}
}
cannot read property ”...” of undefined

¿Cómo funciona this en Javascript?

function foo(){
console.log(this); // 'this' es el objeto global
}
foo();
var obj = {
name: 'Gerardo',
foo: function() {
console.log(this.name); // 'this' points to obj
}
};
obj.foo(); // Gerardo
var name = "meeeec";
var otherFoo = obj.foo;
otherFoo(); // meeeec
function setTimeout(callback, delay){  //wait for 'delay' milliseconds  callback();
}
setTimeout( obj.foo, 1000 );
callback = obj.foo;
var name = "meeeec";
var otherFoo = obj.foo.bind(obj);
otherFoo(); // Gerardo

Recapitulando

<button type="button" onClick={this.onClick}>Click Me</button>
class Foo {
constructor(name){
this.name = name
}
aMethod() {
console.log(this.name);
}
}
var foo = new Foo('Gerardo');
foo.aMethod(); // Gerardo
// Si ahora, asignamos el método foo a otra variable
// y lo ejecutamos, obtenemos el error:
var myEventListener = foo.aMethod;
myEventListener(); // TypeError: this is undefined
class Foo {
constructor(name){
this.name = name;
this.aMethod = this.aMethod.bind(this);
}
aMethod(){
console.log(this.name);
}
}
var foo = new Foo('Gerardo');
foo.aMethod(); // Gerardo
var display = foo.aMethod;
display(); // Gerardo

¿Quieres recibir más artículos como este?

Entre paseo y paseo con Simba desarrollo en Symfony y React

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store