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

问题描述

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

我设置了 ComponentDidMount/ComponentDidUnmount 函数来为我的 handleKeyDown 事件处理程序注册 keyDown 支持，如果我让它触发 alert text，我的 handleKeyDownRight 事件处理程序就可以工作。不幸的是，如果我尝试从 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;

解决方法

请尝试将 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

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

,

这是 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}>