javascript - reactjs typescript händelse detta odefinierat

Jag fick följande komponent skriven i TypeScript. (typdefinitioner från definitelytyped.org). Jag har bundit onWheel-händelsen till en funktion. Men varje gång den utlöses är this undefined, så hur ska jag komma åt det refererade elementet this.div och om jag skulle vilja/behöva ändra tillståndet, hur ska jag göra det?

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

Svar #1

Vet inte om Typescript, men jag antar att det är samma sak som när man skapar komponenter med liknande ES2015-syntax som kommer att behöva en konstruktor och funktionsbindning för att göra att en referens till this.onWheel fungerar.

Så i 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 (){
    ....
  }
}

Svar #2

En annan lösning om du inte vill binda varje funktion i konstruktorn är att använda lambda-uttryck:

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

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

  render () {
    ....
  }
}

Du kan läsa mer här.

Relaterade artiklar