¿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

Con poco que hayáis trabajado con React seguro que habréis tenido que recurrir a implementar algún event listener en alguno de vuestros componentes, como por ejemplo, a la hora de gestionar el click sobre un botón:

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>
    );
  }
}

Un error habitual cuando se trabaja con los event listeners dentro de los componentes es no bindear la función al componente, de modo que cuando el evento se dispara obtenemos el error:

cannot read property ”...” of undefined

¿A qué se debe esto?

¿Cómo funciona this en Javascript?

En líneas generales, la forma en que la variable this queda enlazada dentro de una función depende de la forma en que dicha función es invocada. De este modo, existe por un lado lo que se…