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

Question

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

我在网上搜索了答案。我在 react.js.

中找不到我的具体问题的任何内容

Answer 1

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

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

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

示例：

const [scanData, setScanData] = useState()

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

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

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

Answer 2

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

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

Answer 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;

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

How to implement barcode scanner in reactjs application?

barcode-scanner

npm

reactjs