Reactjs - 从键盘以外的硬件获取输入答案

【问题标题】：Reactjs - get input from hardware other than keyboardReactjs - 从键盘以外的硬件获取输入
【发布时间】：2018-09-09 06:17:56
【问题描述】：

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

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

工作流程：

扫描产品 -> 获取扫描值 -> 调用休息服务

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

最好的办法是在扫描事件中加入dispatch 和action。

我非常感谢即使是很小的想法或提示！

编辑：我也在使用 Redux

【问题讨论】：

在不知道如何从浏览器环境访问此设备的情况下，这与 react 或 redux 根本没有关系。更多的硬件接口问题。该设备是否有适用于您的操作系统的驱动程序？是否有 UI，或者如果它必须是 JS，你可以用 Node 做这个吗？
扫描仪在按钮按下时读取条形码。如果我在打开记事本的情况下执行此操作，它会像我做CTRL+V 一样粘贴读数。所以我想某处必须有一个键盘事件。在那种情况下，我认为这与反应有关。它没有驱动程序/用户界面，它只是将读取的任何内容插入到文本字段中。如果我按下按钮并以这种方式阅读，我实际上想过在文本字段上做一个focus。尽管无需任何其他操作而仅读取条形码会很酷。
嗯，如果这个东西只是使用操作系统的复制粘贴命令，你只需要确保正确的文本输入（或区域）被聚焦，然后在输入上使用 React 的 onChange 处理程序即可有价值的东西。您将在此处理程序中调用this.props.asyncReduxAction(changeEvent.target.value)，并可能在请求正在进行时禁用输入。
稍后会调查。我刚刚尝试使用来自this 响应的代码，如果我根据this 列表解码数字，我确实得到了几乎每个数字，除了第一个数字。它可能读得太慢了。 Here's 解码后的代码。原始条码由数字9009700306215组成
如果您必须等待多个复制粘贴事件直到条形码完成，我会尝试使用<input type="text" onChange={(e) => console.log(e.target.value)} /> 进行调试。只要设备没有为您提供任何将焦点（制表符、输入、转义）从输入中移开的键码，它就应该可以工作。然后，您可以检查长度 === 13 以检测它是否已完成并且 API 调用可以开始。

标签： javascript reactjs redux react-redux

【解决方案1】：

我设法通过在window 上创建onkeypress 事件处理程序来完成这项工作。在那里，我首先用String.fromCharCode(...) 解析keycode，然后将其附加到我的barcode 字段中。

这里的问题是，有不同长度的条形码。就我而言，我必须能够处理 13 和 8 尺寸的条形码，这有点困难，因为阅读器从来没有返回过某种 eof 符号。

我将阅读器配置为在阅读后返回密钥13，对应于ENTER。这是一个完整的list，顺便说一句。

读取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)) ... }

【讨论】：