北京pk10赛车投注网址:浅谈在react中如何实现扫码枪输入

江西多乐彩11选5走势图 www.ptdvv.cn  更新时间:2018年07月04日 10:48:03   作者:张君卓   我要评论

这篇文章主要介绍了浅谈在react中如何实现扫码枪输入,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

触发原理

原理就是监听键盘输入,比如扫一个为6970596130126的69条形码,用扫码枪扫一下会在光标位置依次输出:

6
9
7
0
5
9
6
1
3
0
2
6

但这不是完整的,所以需要写一个函数scanEvent来整理收集到的每个编号。

let code = '';
let lastTime,
  nextTime,
  lastCode,
  nextCode;


function scanEvent(e, cb) {
  nextCode = e.which;
  nextTime = new Date().getTime();

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

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

export { scanEvent };

react中的坑

当我们想在willComponentUnMount阶段移除监听器时,需要传递函数名,否则无法移除??!这是非常值得注意的一点。

完整使用

class Sample extends React.Component{
  componentDidMount(){
    window.addEventListener('keypress', this.scanWrapper, false);
  }

  componentWillUnmount() {
    window.removeEventListener('keypress', this.scanWrapper, false);
  }

  scanWrapper(e) {
    scanEvent(e, (code) => {
      // to do something...
    });
  }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • ES6学习笔记之map、set与数组、对象的对比

    ES6学习笔记之map、set与数组、对象的对比

    这篇文章主要给大家介绍了关于ES6学习笔记之map、set与数组、对象对比的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2018-03-03
  • React组件生命周期详解

    React组件生命周期详解

    本篇文章主要介绍了React组件生命周期,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • css与javascript跨浏览器兼容性总结

    css与javascript跨浏览器兼容性总结

    这篇文章主要介绍了css与javascript跨浏览器兼容性,包括常见的css兼容性问题与javascript兼容性问题,以及IE与Firefox等常用浏览器的兼容性分析,需要的朋友可以参考下
    2014-09-09
  • 单击复制文字兼容各浏览器的完美解决方案

    单击复制文字兼容各浏览器的完美解决方案

    单击复制文字的js找了很久,由于之前没有接触过,完全不知道兼容ie及标准dom浏览器,不仅仅要通过js,而且需要flash的帮忙,下面与大家分享下具体的实现方法
    2013-07-07
  • 正则中的回溯定义与用法分析【JS与java实现】

    正则中的回溯定义与用法分析【JS与java实现】

    这篇文章主要介绍了正则中的回溯定义与用法,结合实例形式分析了回溯的概念、功能并提供了JS与java实现方法,需要的朋友可以参考下
    2016-12-12
  • 借用Google的Javascript API Loader来加速你的网站

    借用Google的Javascript API Loader来加速你的网站

    加速页面加载速度有一个方法就是把CSS和JS文件放到另外一个单独的服务器上,这样在访问量比较大的情况下可以分担主服务器的压力
    2009-01-01
  • 关于react-router/react-router-dom v4 history不能访问问题的解决

    关于react-router/react-router-dom v4 history不能访问问题的解

    这篇文章主要给大家介绍了关于react-router/react-router-dom v4 history不能访问问题的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧。
    2018-01-01
  • 原生JavaScript实现Ajax的方法

    原生JavaScript实现Ajax的方法

    这篇文章主要介绍了原生JavaScript实现Ajax的几种方法,感兴趣的小伙伴们可以参考一下
    2016-04-04
  • JavaScript访问CSS属性的几种方式介绍

    JavaScript访问CSS属性的几种方式介绍

    要通过元素访问样式表,那么就应该先确定是哪个元素。直接访问样式表在该样式块里找相应的样式规则,最后在该样式规则里找相应的样式
    2014-07-07
  • 学习JavaScript设计模式之享元模式

    学习JavaScript设计模式之享元模式

    这篇文章主要为大家介绍了JavaScript设计模式中的享元模式,对JavaScript设计模式感兴趣的小伙伴们可以参考一下
    2016-01-01

最新评论

957| 133| 149| 470| 698| 937| 786| 158| 673| 598|