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

Question

我正在开发一款订单扫描的Web应用程序，我面临的挑战是当条形码匹配时，在我的React.js应用程序中接收数据。
我将使用条码扫描设备，那么我可以使用这个npm包 https://www.npmjs.com/package/react-barcode-reader。 如果可以的话，如何在我的react应用程序中实现它？
我已经在网络上搜索了答案，但没有找到在react.js中解决此问题的特定方法。

- Osama Eshtiaq

---

您是想在您的 Web 应用程序中识别条形码，还是想在应用程序上显示条形码？ - Muljayan

React能够响应扫描条形码吗？ - Osama Eshtiaq

我正在尝试在我的React应用程序中使用条形码阅读器获取数据。由于条形码阅读器是一种输入设备，我该如何从中获取数据并在我的React应用程序中使用呢？ - Osama Eshtiaq

Answer 1

条码扫描器只是一种输入设备，可以将其视为键盘。您可以通过任何TextInput组件接收其输入。

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

- Isaac Khoo

Answer 2

这是一个关于在React中使用简单的原生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;

- Alfonso Tienda

Answer 3

我建议使用 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变量中。希望这对您有所帮助。

- Henry