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

我正在开发一个订单扫描web应用程序，我面临的挑战是，如果条形码匹配，我将在react.js应用程序中从何处接收数据。我将使用条形码扫描设备，所以我可以使用这个npm包。如果是，如何在我的react应用程序中实现它

---

我在网上搜索答案。我在react.js中找不到与我的特定问题相关的任何东西。

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

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

---

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

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

---

如果您的条形码扫描仪被编程为以“\n”终止，则TextInput也将触发onSubmit事件。

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

这项工作使用时间段来检测条形码读数。您可以很容易地更改尾行代码（不需要超时）

从“react”导入{useffect，useState}；
导入“/App.css”；
函数App（）{
常量[barcodeRead，setBarcodeRead]=useState（“”）；
常量条形码={
时间：1000，
数据：“，
};
常数条形码读取=（）=>{
如果（条形码.数据.长度>1）{
setBarcodeRead（条形码数据）；
}否则{
barcode.data=“”；
}
};
let timeout=setTimeout（条形码读取，500）；
useffect（（）=>{
window.addEventListener（“按键键”，（e）=>{
控制台日志（e.key）；
console.log（例如时间戳）；
if（barcode.data.length==0 | | e.timeStamp-barcode.timening<200）{
条形码数据+=e.key；
条形码时间=例如时间戳；
clearTimeout（超时）；
超时=设置超时（条形码读取，500）；
}否则{
barcode.data=“”；
}
控制台日志（条形码）；
});
}, []);
返回(
已读：{barcodeRead}
);
}
导出默认应用程序；

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

const [scanData, setScanData] = useState()

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

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