无法从 ReactJS 应用程序的 keyDown 事件处理程序中调用函数答案

【问题标题】：Can't call function from within keyDown event handler in ReactJS app无法从 ReactJS 应用程序的 keyDown 事件处理程序中调用函数
【发布时间】：2021-09-21 02:15:54
【问题描述】：

我要回到去年开发的幻灯片应用。我已经设置了 prevSlide 和 nextSlide 功能，所以 trigger upon button press 但我也想支持箭头键导航（未来可能还有移动屏幕滑动功能）。

我设置了 ComponentDidMount/ComponentDidUnmount 函数来为我的 handleKeyDown 事件处理程序注册 keyDown 支持，并且我的 handleKeyDownRight 事件处理程序在我触发alert text 时工作。不幸的是，如果我尝试从 handleKeyDownRight 函数中调用 nextSlide 函数，React 会抛出 following error: "TypeError: this.nextSlide is not a function"。

我可以做哪些调整让 handleKeyDownRight 触发 nextSlide() 就像按下“下一步”按钮一样？

import React, {Component} from 'react';
import '../Cantiche.scss';

import Card from '../Card/Card';
import data from '../../../data/data';

class Inferno extends Component {
        state = {
          book: data.inferno,
          slide: data.inferno[0]
        }

        componentDidMount = () => {
          window.addEventListener('keydown', this.handleKeyDownRight);
        }

        prevSlide = () => {
          const newIndex = this.state.slide.index-1;
          this.setState({
            slide: data.inferno[newIndex]
          })
        }

      nextSlide = () => {
        const newIndex = this.state.slide.index+1;
        this.setState({
          slide: data.inferno[newIndex]
        })
      }

      handleKeyDownRight(event) {
        if(event.keyCode === 39){
          alert('Right arrow key');
          this.nextSlide(); //Throws error: "TypeError: this.nextSlide is not a function"
        }
      }

      componentWillUnmount = () => {
        window.addEventListener('keydown', this.handleKeyDownRight);
      }

    render () {
        const {slide} = this.state;

        let cards = (
            <div className={`cards-slider active-slide-${slide.index}`} >
              <div className="cards-slider-wrapper" style={{
                'transform': `translateX(-${slide.index*(100/this.state.book.length)}%)`
              }}>
                {
                  this.state.book.map(slide => <Card key={slide._id} slide={slide} />)
                }
              </div>
            </div>
        )

        return (
            <div className="card-container">
              <h1>Inferno</h1>
              <div className="buttons" onKeyDown={this.handleKeyDownRight}>
                <button 
                  onClick={() => this.prevSlide()} 
                  disabled={slide.index === 0}
                >Prev</button>
                <button 
                  onClick={() => this.nextSlide()} 
                  disabled={slide.index === data.inferno.length-1}
                >Next</button>
              </div>
              {cards}
          </div>
        );
    }
}

export default Inferno;

【问题讨论】：

标签： reactjs function typeerror addeventlistener onkeydown

【解决方案1】：

请尝试将hadleKeyDownRight写成箭头函数，这样它就会像其他函数一样绑定到您的组件：

  handleKeyDownRight = (event) => {
    if(event.keyCode === 39){
      alert('Right arrow key');
      this.nextSlide(); //Throws error: "TypeError: this.nextSlide is not a function"
    }

您不必在 React 中注册事件侦听器。它将由 React 处理，除此之外，React 中的事件以不同的方式工作。关于这一点，您可以阅读文档：https://reactjs.org/docs/handling-events.html

如果对你没有帮助，请在评论中写出问题所在。

【讨论】：

@Andy 不客气，在这些情况下，您可以批准答案，所以每个人都可以看到至少这个答案是这个问题的解决方案。 :)

【解决方案2】：

这是 handleKeyDown 函数的工作代码；具有适当条件语句的单个函数可以处理左右箭头导航。请注意，我已经设置了条件，以便在 slide.index 值为 0（对于 prevSlide）或不存在（nextSlide）时它们不会触发。

handleKeyDown = (event) => {
  if(event.keyCode === 39 && this.state.slide.index !== data.inferno.length-1 ){
    this.nextSlide();
  } else if(event.keyCode === 37 && this.state.slide.index !== 0){
    this.prevSlide();
  }
}

...

<div className="buttons" onKeyDown={this.handleKeyDown}>

【讨论】：