React.js中无需Input元素获取条码扫描数据并存入state的方法

DevOps 小满

2026-8-20

无需Input元素实现条码扫描数据捕获（React.js）

当然可以实现，条码阅读器本质是模拟快速键盘输入，我们可以通过监听全局键盘事件来捕获扫描数据，完全不需要依赖Input元素。

实现思路

组件挂载时给document添加全局keydown事件监听，卸载时移除监听避免内存泄漏
用临时变量收集连续的扫描按键字符
利用扫描器默认在条码末尾添加的回车键作为扫描结束标志，此时将收集到的条码存入state并清空临时字符

完整代码实现

import { useState, useEffect } from 'react';
import { Stack } from '@mui/material';

export default function ScanCheckForm() {
  const [barcodeValue, setBarcodeValue] = useState('');
  // 临时存储扫描过程中的字符
  let scannedChars = '';

  useEffect(() => {
    const handleKeyDown = (event) => {
      // 只收集可打印的单个字符，排除Shift、Ctrl等功能键
      if (event.key.length === 1) {
        scannedChars += event.key;
      }
      // 扫描器通常以回车键结束扫描，此时将数据存入state
      if (event.keyCode === 13 && scannedChars) {
        setBarcodeValue(scannedChars);
        console.log('扫描到的条码:', scannedChars);
        scannedChars = '';
      }
    };

    // 注册全局键盘监听
    document.addEventListener('keydown', handleKeyDown);

    // 组件卸载时移除监听，防止内存泄漏
    return () => {
      document.removeEventListener('keydown', handleKeyDown);
    };
  }, []);

  return (
    <Stack spacing={3}>
      <div>当前扫描到的条码: {barcodeValue}</div>
    </Stack>
  );
}