Доступ к локальной функции внутри события window.onkeydown

Question

Пытаюсь вызвать одну из моих функций внутри этой функции window.onkeydown, но я вне ее.Любые идеи, что я могу сделать?

componentDidMount() {
  setTimeout(() => {
    window.onkeydown = function(e) {
      if (e.keyCode === 13) {
        console.log("Enter detected");
        // this.handleNextCard(); // this function will throw an error: undefined
      }
    };
  }, 250);
}

componentWillUnmount() {
  window.onkeydown = null;
}

handleFlipCard() {
  this.props.toggleViewAnswer();
}

handleNextCard() {
  this.props.selectNextCard();
}

render(){}

Answer 1

Попробуйте использовать другую функцию стрелки для обработчика keydown - он унаследует свои this:

window.onkeydown = e => {
  if (e.keyCode === 13) {
    console.log("Enter detected");
    this.handleNextCard();
  }
}

Answer 2

Перед функциями стрелок это можно сделать следующим образом:

 componentDidMount() {
  setTimeout(() => {
    var that = this;
    window.onkeydown = function(e) {
      if (e.keyCode === 13) {
        console.log("Enter detected");
        that.handleNextCard(); 
      }
    };
  }, 250);
}