react如何实现按键翻页

实现按键翻页的基本思路

在React中实现按键翻页功能，主要通过监听键盘事件（如keydown）来触发页面切换逻辑。核心步骤包括绑定事件、处理按键逻辑、更新状态或路由。

监听键盘事件

在组件挂载时添加键盘事件监听，卸载时移除监听以避免内存泄漏。使用useEffect钩子实现这一生命周期管理。

useEffect(() => {
  const handleKeyDown = (e) => {
    if (e.key === 'ArrowRight') {
      // 下一页逻辑
    } else if (e.key === 'ArrowLeft') {
      // 上一页逻辑
    }
  };
  window.addEventListener('keydown', handleKeyDown);
  return () => window.removeEventListener('keydown', handleKeyDown);
}, []);

翻页逻辑实现

根据当前页码和总页数更新状态。假设使用useState管理页码：

const [currentPage, setCurrentPage] = useState(1);
const totalPages = 5; // 总页数示例

const handleKeyDown = (e) => {
  if (e.key === 'ArrowRight' && currentPage < totalPages) {
    setCurrentPage(currentPage + 1);
  } else if (e.key === 'ArrowLeft' && currentPage > 1) {
    setCurrentPage(currentPage - 1);
  }
};

结合路由的翻页

若使用React Router，可通过useNavigate跳转路由：

import { useNavigate } from 'react-router-dom';

const navigate = useNavigate();
const handleKeyDown = (e) => {
  if (e.key === 'ArrowRight') {
    navigate(`/page/${currentPage + 1}`);
  } else if (e.key === 'ArrowLeft') {
    navigate(`/page/${currentPage - 1}`);
  }
};

防抖优化

连续快速按键可能导致频繁渲染，可通过防抖函数限制触发频率：

import { debounce } from 'lodash';

const debouncedHandleKeyDown = debounce((e) => {
  // 翻页逻辑
}, 300);

useEffect(() => {
  window.addEventListener('keydown', debouncedHandleKeyDown);
  return () => {
    window.removeEventListener('keydown', debouncedHandleKeyDown);
    debouncedHandleKeyDown.cancel();
  };
}, []);

完整组件示例

import React, { useState, useEffect } from 'react';

const PageTurner = () => {
  const [currentPage, setCurrentPage] = useState(1);
  const totalPages = 10;

  useEffect(() => {
    const handleKeyDown = (e) => {
      if (e.key === 'ArrowRight' && currentPage < totalPages) {
        setCurrentPage(currentPage + 1);
      } else if (e.key === 'ArrowLeft' && currentPage > 1) {
        setCurrentPage(currentPage - 1);
      }
    };
    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [currentPage]);

  return (
    <div>
      <p>当前页码: {currentPage}</p>
      <p>使用左右方向键翻页</p>
    </div>
  );
};

export default PageTurner;