reactjs typescript event this undefined

Question

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

dannyjolie · Accepted Answer · 2016-03-19 20:10:01Z

7

Don't know about Typescript, but I'm guessing it's the same thing as when creating components using the similar ES2015 syntax which will need a constructor, and function binding to make a reference to this.onWheel work.

So in 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 (){
    ....
  }
}

edited Mar 19, 2016 at 20:10

answered Mar 19, 2016 at 19:56

dannyjolie

11.4k3 gold badges35 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Chris Kobrzak Over a year ago

This is actually a preferred way of binding event handlers in React components to the answer by Qwertiy. If you do the binding inside the constructor like in the snippet above, that means you only create a copy of the function once whereas if you do it inside of the render method the function will get re-created every time React re-renders the component. Worth bearing it in mind when performance is a major consideration.

Rutger Over a year ago

But then how is the event bound? I still got to put onWheel={this.onWheel} in the render method right?

dannyjolie Over a year ago

Just do it the way you already do. It should work fine. My code example didn't have onWheel(e: React.WheelEvent), because the point was what's going on in the constructor.

César Alberca · Accepted Answer · 2017-05-07 16:25:00Z

5

Another solution if you don't want to bind each function in the constructor is to use lambdas:

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

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

  render () {
    ....
  }
}

You can read more here.

answered May 7, 2017 at 16:25

César Alberca

2,7113 gold badges24 silver badges34 bronze badges

1 Comment

ThinkingInBits Over a year ago

Beat me to the punch.

Qwertiy · Accepted Answer · 2016-03-19 19:56:14Z

2

onWheel= { this.onWheel}

onWheel={this.onWheel.bind(this)}

answered Mar 19, 2016 at 19:56

Qwertiy

21.9k17 gold badges69 silver badges143 bronze badges

1 Comment

Slava Shpitalny Over a year ago

You can also write it in lambda form onWheel={e => this.onWheel(e)} it will call the appropriate method using closures

Bhardwaj Avasarala · Accepted Answer · 2020-04-14 01:32:05Z

1

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

answered Apr 14, 2020 at 1:32

Bhardwaj Avasarala

735 bronze badges

Collectives™ on Stack Overflow

reactjs typescript event this undefined

4 Answers 4

3 Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related