React应用程序的条码扫描器

Question

我正在开发一个ReactJS应用程序，在那里我需要读取条形码值，并且扫描的值应该弹出在特定的文本框中，您有什么想法或者至少我需要知道是否可以这样做..

我需要使用一个物理USB条形码扫描器。

- coding_Lover

---

你打算如何扫描条形码？你会上传一张图片吗？还是你已经为客户端使用应用程序附加了条形码扫描器？ - Bilal

我需要使用一个实体 USB 条形码扫描器。 - coding_Lover

物理条码扫描器可以像键盘一样操作，因此如果您将焦点设置在文本字段上，并希望默认情况下将代码放置在该字段中，则扫描代码后，它将出现在文本字段中。扫描仪可以配置为在最后添加(Enter)或(Tab)，以便您可以处理已扫描的值。 - Bilal

我能使用这个包吗？https://www.npmjs.com/package/react-barcode-reader？那会是解决方案吗？因为你说条形码扫描仪就像键盘一样，那么我能将焦点设置到文本字段吗？ - coding_Lover

是的，你可以使用这个包。 - Bilal

如果您要使用硬件条形码扫描器，则应用程序不需要特殊解决方案。您只需要使用<input type="text">即可。运行条形码扫描器时，它会自动将条形码结果输入到文本字段中。 - yushulx

Answer 1

该组件帮助将设备上的条形码读取到React应用程序中。

https://www.npmjs.com/package/react-barcode-reader

import React, { Component } from 'react'
import BarcodeReader from 'react-barcode-reader'


    class Test extends Component {
      constructor(props){
        super(props)
        this.state = {
          result: 'No result',
        }

        this.handleScan = this.handleScan.bind(this)
      }
      handleScan(data){
        this.setState({
          result: data,
        })
      }
      handleError(err){
        console.error(err)
      }
      render(){

        return(
          <div>
            <BarcodeReader
              onError={this.handleError}
              onScan={this.handleScan}
              />
            <p>{this.state.result}</p>
          </div>
        )
      }
    }

- Muthukumar Marichamy

---

此代码没有实际作用，条形码组件无法打开相机。 - remacr

我使用这个程序来读取纸张上印刷的条形码。 - coding_Lover

这段代码不可用。 - Chathu.Thanthrige

Answer 2

我通过谷歌搜索发现了这个网站https://lindell.me/JsBarcode/，它可以生成条形码。

这个库可以读取条形码https://www.npmjs.com/package/barcode-js

- Max Burger

Answer 3

如果您需要进行条形码阅读，这个库可以使用。

https://codesandbox.io/s/tgo42

- Chathu.Thanthrige

---

这个库支持条形码扫描手持设备吗？ - duc nguyendinh trung