react实现扫码枪输入

今天接到一个和扫码枪有关的任务，听起来就很有意思。

项目背景：列表页进入详情页的方式目前有两种

• 直接点击列表进入
• 搜索出具体列表项，再点击进入
• 新接入的需求（扫码枪扫码进入）这是第三种进入详情页的方式哦

要求：使用扫码枪扫描二维码或条形码，获取到流程id，通过该id拼接url，跳转到详情页

---

是不是有人和我一样，听到扫码枪的一瞬间是懵逼的，扫码...枪...是what？

扫码枪.png

对，就是这个玩意，是不是联想到了超市收营员....我今天就滴滴滴扫了好久，当了一天收营员呢，哈哈哈

---

原理：扫码枪的原理，其实google一下很多人都有讲，我大概copy这么几句吧。

• 条码扫描器其实就是一种输入设备，跟键盘一样。在控制台打印扫描过程，可以看出，扫描过程就像是在键盘上敲击相应的键，keycode和键盘是一一对应的。
• 所以监听键盘输入，就能获取到码。
• 扫码枪会把扫到的码自动填充到光标所在位置

测试用到的扫码器最后会输入回车（也就是keyCode === 13），所以我根据13判断是否输入完毕（值得注意的是：不一定所有扫描器都有回车。多数扫码器有 跳线 或 开关 设定是否加回车）

实现

• 网络上的方式

// 扫码枪用到的变量
code = ''
lastTime = ''
nextTime = ''
lastCode = ''
nextCode = ''

componentDidMount(){
   window.addEventListener('keypress', this.scanWrapper, false);
}

// 不要忘记销毁事件
componentWillUnmount() {
   window.removeEventListener('keypress', this.scanWrapper, false);
}
scanWrapper = (e) => {
    // e.which拿到的是keyCode
    this.nextCode = e.which;
    this.nextTime = new Date().getTime();

    if (this.lastCode != null && this.lastTime != null && this.nextTime - this.lastTime <= 30) {
        this.code += String.fromCharCode(lastCode);
    } else if (this.lastCode != null && this..lastTime != null && this.nextTime - this.lastTime > 100) {
        this.code = '';
    }

    this.lastCode = this.nextCode;
    this.lastTime = this.nextTime;
    if (e.which === 13) {
        console.log('code', this.code);
        this.code = '';
    }
}

• 我的实现方式

class ScanQrcode extends React.PureComponent {
  componentDidMount() {
    // 自动获取输入框的焦点，扫码枪扫码后才能把数字填充进来
    this.inputObj.focus()
    window.addEventListener('keypress', this.scanWrapper, false)
    document.addEventListener('visibilitychange', this.handleVisibilityChange, false)
  }

  componentWillUnmount() {
    window.removeEventListener('keypress', this.scanWrapper, false)
    document.addEventListener('visibilitychange', this.handleVisibilityChange, false)
  }

  handleVisibilityChange = () => {
    if (!document.hidden) {
      this.inputObj.focus()
    }
  }

  scanWrapper = (e) => {
    // code = 13 表示按下了enter键，也就是扫码枪扫码结束
    if (e.which === 13) {
      const processId = this.inputObj.value
      processId && this.gotoDetail(processId)
    }
  }

  onChange = () => {
    this.processId = this.inputObj.value
  }

  /**
   * 跳转到详情页
   */
  gotoDetail = () => {
    const baseUrl = '/xxx/xxxx/xxx'
    const { processId } = this.processId
    openDetailPage(baseUrl + processId) // 拼接跳转链接

    this.inputObj.value = ''
  }

  render () {
    return (
      

         { this.inputObj = processId }}
            onChange={this.onChange} ref={(processId) => { this.processId = processId }}
        />
      
    )
  }
}

同样是监听键盘事件，但是这里，通过focus()方法强制获取input焦点

 componentDidMount() {
    // 自动获取输入框的焦点，扫码枪扫码后才能把数字填充进来
    this.inputObj.focus()
    window.addEventListener('keypress', this.scanWrapper, false)
    document.addEventListener('visibilitychange', this.handleVisibilityChange, false)
  }

上面我们说过：扫码枪会把扫到的码自动填充到光标所在位置
所以，通过input框的onChange事件获取input框的值，也就获取到了条码

 onChange = () => {
    this.processId = this.inputObj.value
  }

 

         { this.inputObj = processId }}
            onChange={this.onChange} ref={(processId) => { this.processId = processId }}
        />
 

接着通过监听键盘事件函数，判断是否已经输入完毕（keyCode === 13），输入完毕了之后，再去跳转详情页

 scanWrapper = (e) => {
    // code = 13 表示按下了enter键，也就是扫码枪扫码结束
    if (e.which === 13) {
      const processId = this.inputObj.value
      processId && this.gotoDetail(processId)
    }
  }

总结：

• 觉得自己的方式看起来更容易理解一些
• 但有一个弊端：如果扫码枪没有回车事件的话，该怎么判断是否输入完毕？？