Valore di questo nel gestore eventi React

Question

Per qualche motivo il valore di questo si sta perdendo nel gestore eventi react. Leggendo la documentazione ho pensato che reagiscono ha fatto un po 'di roba qui per assicurarsi che questo è stato impostato sul valore corretto

La seguente non funziona come mi aspetto

import React from 'react'; 

export default class Observer extends React.Component { 

    handleClick() { 
     console.log(this); //logs undefined 
    } 
    render() { 
     return (
      <button onClick={this.handleClick}>Click</button> 
     ); 
    } 
} 

ma questo:

import React from 'react'; 

export default class Observer extends React.Component { 

    handleClick() { 
     console.log(this); //logs Observer class instance 
    } 
    render() { 
     return (
      <button onClick={this.handleClick.bind(this)}>Click</button> 
     ); 
    } 
} 

React e ES6 sono nuovi per me ma questo sembra non essere il comportamento corretto?

Answer 1

Questo comportamento è corretto per JavaScript e Reagire se si utilizza la nuova sintassi class.

autobinding feature does not apply to ES6 classes in v0.13.0.

Quindi è necessario utilizzare:

<button onClick={this.handleClick.bind(this)}>Click</button> 

o uno degli altri trucchi:

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

Answer 2

Come altri hanno detto, Reagire non bind automatico metodi per l'istanza quando si utilizza ES6 classi. Detto questo, vorrei fare l'abitudine di utilizzare sempre le funzioni di direzione in gestori di eventi come: onClick={e => this.handleClick()}

Invece di: onClick={this.handleClick.bind(this)}

Ciò perché significa che è possibile sostituire il metodo handleClick con una spia in un test, qualcosa che si non posso fare quando usi il bind.

Answer 3

La risposta accettata è buona e l'ho usato molto in ES6, ma voglio solo aggiungere un'altra soluzione "più moderno" che abbiamo con ES7 (menzionato nel React component class auto-binding notes): utilizzare le funzioni di direzione come class properties, allora non hai bisogno di legare o avvolgere il tuo gestore ovunque.

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

Questa è la soluzione più semplice e pulita!