Valor de esto en el controlador de eventos React

Por alguna razón, el valor de esto se pierde en el controlador de eventos de reacción. Leyendo los documentos que pensé que reactjsron hizo algunas cosas aquí para asegurarse de que esto se estableció en el valor correcto

Lo siguiente no funciona como esperaba

import React from 'react'; export default class Observer extends React.Component { handleClick() { console.log(this); //logs undefined } render() { return (  ); } } 

Pero esto hace:

 import React from 'react'; export default class Observer extends React.Component { handleClick() { console.log(this); //logs Observer class instance } render() { return (  ); } } 

Reaccionar y ES6 es nuevo para mí, pero parece que este no es el comportamiento correcto.

Este es el comportamiento correcto para JavaScript y React si usa la nueva syntax de class .

La función de enlace automático no se aplica a las clases ES6 en v0.13.0.

Entonces necesitarás usar:

   

O uno de los otros trucos:

 export default class Observer extends React.Component { constructor() { super(); this.handleClick = this.handleClick.bind(this); } handleClick() { /* ... */ } render() { return  } } 

La respuesta aceptada es buena y la he usado mucho en ES6, pero solo quiero agregar otra solución “más moderna” que tenemos con ES7 (mencionada en las notas de autoconexión de la clase de componente React ): use las funciones de flecha como clase propiedades , entonces no es necesario vincular o ajustar su controlador en cualquier lugar.

 export default class Observer extends React.Component { handleClick = (e) => { /* ... */ } render() { return  } } 

¡Esta es la solución más simple y limpia hasta ahora!

Como han dicho otros, React no enlaza métodos a la instancia cuando usa clases ES6. Dicho esto, tendría la costumbre de utilizar siempre las funciones de flecha en controladores de eventos como: onClick={e => this.handleClick()}

En lugar de: onClick={this.handleClick.bind(this)}

Esto porque significa que puedes reemplazar el método handleClick con un espía en una prueba, algo que no puedes hacer cuando utilizas bind.