Reactjs - 从键盘

Question

我正在编写ReactJS应用程序，我需要能够使用专用条形码扫描仪读取条形码。

我完全迷失了这个。我在github上发现了一些组件，但是我没有弄清楚如何从扫描器获取输入。我知道它的输出只是一个字符串，但我必须能够随时扫描产品而不关注textfield或其他组件。

工作流：

扫描产品 - ＆gt; 获取扫描值 - ＆gt;呼叫休息服务

扫描仪只是一个简单的USB设备。

最好的事情可能是dispatch action扫描事件。

我非常感谢即使是轻微的想法或提示！

编辑：我也在使用 Redux

Answer 1

我设法通过在onkeypress上创建window事件处理程序来实现此目的。在那里，我首先使用keycode解析String.fromCharCode(...)，然后将其附加到我的barcode字段。

这里的问题是，有不同长度的条形码。在我的情况下，我必须能够处理13和8大小的条形码，这有点困难，因为读者从未返回某种eof符号。

我将阅读器配置为在阅读后返回键13，这与ENTER相对应。这是一个整体list，键码为btw。

阅读13后，整个条形码已经扫描过了。

然后，我将事件handler方法添加到componentDidMount()并在barcode中调度返回的mapDispatchToProps并将返回的元素（后端）保存在我的商店中。

以下是代码：

  scan = scannedBarcode => {
    console.log("SCANNED")
    this.props.getProductByBarcode(scannedBarcode);
  }

  componentDidMount() {

    // Setup Key Listener for the barcode scanner

    let self = this;

    window.onkeypress = function(e) {
      let barcode = "";
      let code = e.keyCode ? e.keyCode : e.which;
      barcode=barcode+String.fromCharCode(code);
      scannedBarcode += barcode;

      if (code === ENTER_KEY) {
        console.log("DISPATCHING: " + scannedBarcode);
        self.scan(scannedBarcode);
        scannedBarcode = '';
      }
    }
  }

这里是mapDispatchToProps：

const mapDispatchToProps = (dispatch) => {
  return { 
    getProductByBarcode: barcode => {
      dispatch(getProductByBarcode(barcode)) ... }