如何在 reactjs 应用程序中实现条码扫描器？答案

【问题标题】：How to implement barcode scanner in reactjs application?如何在 reactjs 应用程序中实现条码扫描器？
【发布时间】：2020-03-06 20:48:36
【问题描述】：

我正在开发一个 Order Scan Web 应用程序，我面临的挑战是，如果条形码匹配，我将在我的 react.js 应用程序中接收数据的位置。我将使用条形码扫描仪设备，所以我可以使用这个 npm 包https://www.npmjs.com/package/react-barcode-reader。如果是这样，如何在我的反应应用中实现它？

我已经在网上搜索了答案。我在 react.js 中找不到任何与我的具体问题有关的内容。

【问题讨论】：

您是在尝试从您的网络应用程序中对条形码做出反应，还是尝试在您的应用程序上显示条形码？
反应条形码？？
我正在尝试使用条形码阅读器在我的反应应用程序中获取数据。由于条形码阅读器是一种输入设备，我如何在我的 react 应用中从中获取数据？

标签： reactjs npm barcode-scanner

【解决方案1】：

我建议使用 React Barcode Scanner NPM 包。该站点上有一个简单的演示。您可以使用他们的 Barcode Scanner 组件：

<BarcodeReader
onError={handleError}
onScan={handleScan}
/>

您可以将该组件应用到您希望用户执行扫描的位置。您只需要创建一个 handleScan 和 handleError 函数。

例子：

const [scanData, setScanData] = useState()

const handleScan = (data) => {
  setScanData(data)
}

const handleError = (err) => console.error(err)

数据将存储在 scanData 变量中。希望对您有所帮助。

【讨论】：

【解决方案2】：

条形码扫描仪只是一种输入设备。把它想象成一个键盘。您可以通过任何 TextInputs 组件接收其输入。

如果您的条码扫描器被编程为以“\n”终止，那么 TextInput 也会触发 onSubmit 事件。

【讨论】：

【解决方案3】：

这是一个非常简单的 React 条码读取示例，使用简单的 vanilla javascript：

这使用时间范围来检测条形码读数。您可以轻松地将其更改为结束代码（您不需要超时）

import { useEffect, useState } from "react";
import "./App.css";

function App() {
  const [barcodeRead, setBarcodeRead] = useState("");

  const barcode = {
    timing: 1000,
    data: "",
  };

  const barcodeReaded = () => {
    if (barcode.data.length > 1) {
      setBarcodeRead(barcode.data);
    } else {
      barcode.data = "";
    }
  };

  let timeout = setTimeout(barcodeReaded, 500);

  useEffect(() => {
    window.addEventListener("keypress", (e) => {
      console.log(e.key);
      console.log(e.timeStamp);
      if (barcode.data.length === 0 || e.timeStamp - barcode.timing < 200) {
        barcode.data += e.key;
        barcode.timing = e.timeStamp;
        clearTimeout(timeout);
        timeout = setTimeout(barcodeReaded, 500);
      } else {
        barcode.data = "";
      }
      console.log(barcode);
    });
  }, []);

  return (
    <div className="App">
      <div>Readed: {barcodeRead}</div>
    </div>
  );
}

export default App;

【讨论】：