reactjs typescript событие это неопределенное


Я получил следующий компонент, написанный на машинке. (определения типов из definitelytyped.org). я получил событие onWheel, привязанное к функции. Но когда когда-либо он срабатывает this не определен, так как я должен получить доступ к указанному элементу this.div и если я хочу / должен изменить состояние, как это сделать?

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

3 ответа:

Не знаю о Typescript, но я предполагаю, что это то же самое, что и при создании компонентов с использованием аналогичного синтаксиса ES2015, для которого потребуется конструктор и привязка функции, чтобы сделать ссылку на это.на колесах работают.

Так что в 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 (){
    ....
  }
}
onWheel= { this.onWheel}
onWheel={this.onWheel.bind(this)}

Другое решение, если вы не хотите связывать каждую функцию в конструкторе, - использовать лямбды:

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

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

  render () {
    ....
  }
}

Вы можете прочитать большездесь .