ReactJS中USB条码扫描器数据获取与购物车逻辑实现问题

一、核心问题：捕获扫描器的输入内容 #

USB条码扫描器本质是模拟键盘输入设备，会将扫描的QR码内容逐字符输入，多数型号会在末尾附加一个Enter键作为扫描结束标记。我们可以通过监听全局键盘事件来收集并识别完整的扫描内容。

基础实现：监听Enter键结束扫描 #

在React组件中挂载全局键盘监听，收集输入字符，遇到Enter键时确认扫描完成：

import { useState, useEffect } from 'react';

function ScannerCart() {
  const [scannedCode, setScannedCode] = useState('');
  const [tempInput, setTempInput] = useState('');

  useEffect(() => {
    const handleKeyDown = (e) => {
      // 扫描结束触发Enter键，确认完整编码
      if (e.key === 'Enter') {
        if (tempInput.trim()) {
          setScannedCode(tempInput.trim());
          setTempInput(''); // 清空临时缓存
        }
      } else if (e.key.length === 1) {
        // 仅收集普通字符，排除Shift、Ctrl等功能键
        setTempInput(prev => prev + e.key);
      }
    };

    // 绑定全局键盘事件
    window.addEventListener('keydown', handleKeyDown);
    // 组件卸载时移除监听，避免内存泄漏
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [tempInput]);

  return (
    <div>
      <p>已扫描QR码: {scannedCode}</p>
    </div>
  );
}

export default ScannerCart;

优化方案：超时判定扫描完成 #

如果你的扫描器没有配置Enter键结尾，可以通过超时机制判断：当300ms内无新输入时，认定扫描完成（可根据扫描器速度调整超时时间）：

useEffect(() => {
  let timeoutId;
  const handleKeyDown = (e) => {
    if (e.key.length === 1) {
      setTempInput(prev => prev + e.key);
      // 每次输入重置超时
      clearTimeout(timeoutId);
      timeoutId = setTimeout(() => {
        setScannedCode(tempInput.trim());
        setTempInput('');
      }, 300);
    }
  };

  window.addEventListener('keydown', handleKeyDown);
  return () => {
    window.removeEventListener('keydown', handleKeyDown);
    clearTimeout(timeoutId);
  };
}, [tempInput]);

二、匹配商品并添加到购物车 #

获取到scannedCode后，即可与数据库商品数据比对，完成购物车添加逻辑：

import { useState, useEffect } from 'react';

function ScannerCart() {
  const [scannedCode, setScannedCode] = useState('');
  const [tempInput, setTempInput] = useState('');
  const [cart, setCart] = useState([]);
  const [products, setProducts] = useState([]);

  // 模拟从后端获取商品数据（实际项目替换为API请求）
  useEffect(() => {
    const mockProducts = [
      { id: 1, qrCode: 'PROD001', name: '无线耳机', price: 299 },
      { id: 2, qrCode: 'PROD002', name: '智能手表', price: 599 }
    ];
    setProducts(mockProducts);
  }, []);

  // 监听扫描结果，匹配商品并更新购物车
  useEffect(() => {
    if (!scannedCode) return;

    const matchedItem = products.find(prod => prod.qrCode === scannedCode);
    if (matchedItem) {
      // 购物车已有商品则增加数量，无则添加新条目
      setCart(prev => {
        const existing = prev.find(item => item.id === matchedItem.id);
        return existing 
          ? prev.map(item => item.id === matchedItem.id ? {...item, quantity: item.quantity + 1} : item)
          : [...prev, {...matchedItem, quantity: 1}];
      });
      alert(`已添加「${matchedItem.name}」到购物车`);
    } else {
      alert('未找到对应商品，请检查QR码');
    }
  }, [scannedCode, products]);

  // 键盘监听逻辑同之前的代码
  useEffect(() => {
    const handleKeyDown = (e) => {
      if (e.key === 'Enter') {
        tempInput.trim() && setScannedCode(tempInput.trim());
        setTempInput('');
      } else if (e.key.length === 1) {
        setTempInput(prev => prev + e.key);
      }
    };
    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [tempInput]);

  return (
    <div>
      <p>已扫描QR码: {scannedCode}</p>
      <h3>购物车</h3>
      <ul>
        {cart.map(item => (
          <li key={item.id}>
            {item.name} - ￥{item.price} × {item.quantity}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default ScannerCart;

三、实用注意事项 #

• 页面焦点：扫描器的输入会发送到当前有焦点的元素，使用全局键盘监听则无需刻意保持输入框焦点。
• 扫描器配置：部分扫描器可自定义输出格式（如是否带回车、前缀后缀），可查看说明书调整，简化捕获逻辑。
• 生产环境优化：商品比对逻辑建议放在后端，前端仅发送扫描编码到后端接口，接收返回的商品信息后更新购物车，避免前端暴露全部商品数据。

内容的提问来源于stack exchange，提问作者alireza