react如何实现按键翻页

实现按键翻页的基本思路

在React中实现按键翻页，通常需要监听键盘事件，根据按键类型（如左右箭头）更新当前页码或数据索引。核心步骤包括：绑定键盘事件、处理按键逻辑、更新组件状态。

监听键盘事件

使用useEffect在组件挂载时添加全局键盘事件监听，并在卸载时移除。通过event.key判断具体按键：

useEffect(() => {
  const handleKeyDown = (event) => {
    if (event.key === 'ArrowLeft') {
      // 左箭头逻辑
    } else if (event.key === 'ArrowRight') {
      // 右箭头逻辑
    }
  };
  window.addEventListener('keydown', handleKeyDown);
  return () => window.removeEventListener('keydown', handleKeyDown);
}, []);

更新页码状态

通过useState管理当前页码，按键触发时修改状态。需注意边界条件（如第一页禁止左翻、最后一页禁止右翻）：

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

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

优化性能与防抖

高频按键可能导致频繁渲染，可通过防抖（debounce）限制事件触发频率。使用lodash.debounce或自定义实现：

import debounce from 'lodash.debounce';

const debouncedHandleKeyDown = debounce((event) => {
  // 处理逻辑
}, 300);

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

完整示例代码

结合上述逻辑的完整组件示例：

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

const KeyboardPagination = () => {
  const [currentPage, setCurrentPage] = useState(1);
  const totalPages = 5;

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

  return (
    <div>
      <p>当前页: {currentPage} / {totalPages}</p>
      <p>使用左右箭头键翻页</p>
    </div>
  );
};

export default KeyboardPagination;

扩展功能

1. 自定义按键：支持其他按键（如PageUp/PageDown）：

   if (event.key === 'PageUp') { /* 上一页 */ }
   if (event.key === 'PageDown') { /* 下一页 */ }

2. 焦点控制：仅在特定元素（如输入框）外触发：

   if (event.target.tagName !== 'INPUT') {
     // 处理翻页
   }

3. 触摸设备兼容：结合触摸事件（如滑动）实现移动端支持。