reactjs typescript event this undefined

user_786192 0
Viewed 5337

I got the following component written in typescript. (type definitions from definitelytyped.org). I got the onWheel event bound to a function. But when ever it is fired this is undefined, so how am I supposed to access the referenced element this.div and if I would want/need to change the state how should do that?

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 >)
    }
}
typescript reactjs javascript
4 Answers

The simple thing would be converting it into an arrow function which binds automatically: 

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

    //Do stuff with the div, and yes you can work with 'this' in this function
    this.div;
}
user_87686160
Related