javascript - reactjs typescript evento this indefinido

Tengo el siguiente componente escrito en TypeScript. (definiciones de tipos de definitelytyped.org). Tengo el evento onWheel vinculado a una función. Pero cada vez que se dispara, this es indefinido, así que ¿cómo se supone que debo acceder al elemento referenciado this.div y si quisiera/necesitara cambiar el estado, ¿cómo debería hacerlo?

import React = require('react');

interface fooProps {
    src: string;
}

class foo extends React.Component<fooProps, {}>
{
    private div: HTMLDivElement;

    public onWheel(e: React.WheelEvent): void {
        e.preventDefault();
        e.stopPropagation();

        //Do stuff with the div, but 'this' is undefined!!
        this.div;
    }
    public render(): JSX.Element {
                return (
            <div ref={(ref) => this.div = ref} onWheel= { this.onWheel} >
                <img src={ this.props.src } />
                </div >)
    }
}

Respuesta #1

No sé sobre TypeScript, pero supongo que es lo mismo que al crear componentes usando la sintaxis similar de ES2015, que necesitarán un constructor y la vinculación de funciones para que una referencia a this.onWheel funcione.

Entonces, en ES2015,

class foo extends React.Component {
  constructor(props) {
    super(props);
    // Magic happens here:
    this.onWheel = this.onWheel.bind(this)
    // Now each instance of foo can use this.onWheel
  }

  onWheel () {
    ....
  }

  render (){
    ....
  }
}

Respuesta #2

Otra solución si no quieres enlazar cada función en el constructor es usar lambdas:

class foo extends React.Component {
  constructor(props) {
    super(props);
  }

  // The lambda creates a lexical scope so it's autobound
  onWheel = () => {
    ....
  }

  render () {
    ....
  }
}

Puedes leer más aquí.