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 ответа:
Не знаю о 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 (){ .... } }
Другое решение, если вы не хотите связывать каждую функцию в конструкторе, - использовать лямбды:
class foo extends React.Component { constructor(props) { super(props); } // The lambda creates a lexical scope so it's autobound onWheel = () => { .... } render () { .... } }
Вы можете прочитать большездесь .