浅谈在react中如何实现扫码枪输入


Posted in Javascript onJuly 04, 2018

触发原理

原理就是监听键盘输入,比如扫一个为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...
    });
  }
}

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

Javascript 相关文章推荐
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
Apr 24 Javascript
JavaScript 变量、作用域及内存
Apr 08 Javascript
JS中产生标识符方式的演变
Jun 12 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
Aug 05 Javascript
jQuery实现Tab菜单滚动切换的方法
Sep 21 Javascript
Vue.js每天必学之表单控件绑定
Sep 05 Javascript
防止重复发送 Ajax 请求
Feb 15 Javascript
Angularjs验证用户输入的字符串是否为日期时间
Jun 01 Javascript
JS中Swiper的使用和轮播图效果
Aug 11 Javascript
vue服务端渲染添加缓存的方法
Sep 18 Javascript
JavaScript对象属性操作实例解析
Feb 04 Javascript
vue中使用腾讯云Im的示例
Oct 23 Javascript
Redux实现组合计数器的示例代码
Jul 04 #Javascript
用Node编写RESTful API接口的示例代码
Jul 04 #Javascript
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
Jul 04 #Javascript
JS实现点击按钮可实现编辑功能
Jul 03 #Javascript
详解vue-cli中模拟数据的两种方法
Jul 03 #Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
Jul 03 #Javascript
基于React+Redux的SSR实现方法
Jul 03 #Javascript
You might like
[原创]php集成安装包wampserver修改密码后phpmyadmin无法登陆的解决方法
2016/11/23 PHP
PHP 网站修改默认访问文件的nginx配置
2017/05/27 PHP
Laravel 自动生成验证的实例讲解:login / logout
2019/10/14 PHP
dojo 之基础篇
2007/03/24 Javascript
JS俄罗斯方块,包含完整的设计理念
2010/12/11 Javascript
中止javascript执行的方法
2014/02/14 Javascript
全面了解JavaScript的数据类型转换
2016/07/01 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
2016/08/02 Javascript
jquery层级选择器(匹配父元素下的子元素实现代码)
2016/09/05 Javascript
BootStrap 实现各种样式的进度条效果
2016/12/07 Javascript
纯js实现倒计时功能
2017/01/06 Javascript
JavaScript中双符号的运算详解
2017/03/12 Javascript
AngularJS实现图片上传和预览功能的方法分析
2017/11/08 Javascript
浅析Node.js非对称加密方法
2018/01/29 Javascript
vue 标签属性数据绑定和拼接的实现方法
2018/05/17 Javascript
解决webpack+Vue引入iView找不到字体文件的问题
2018/09/28 Javascript
给localStorage设置一个过期时间的方法分享
2018/11/06 Javascript
js数组去重的方法总结
2019/01/18 Javascript
微信小程序动态设置图片大小的方法
2019/11/21 Javascript
微信小程序实现首页弹出广告
2020/12/03 Javascript
[06:25]第二届DOTA2亚洲邀请赛主赛事第二天比赛集锦.mp4
2017/04/03 DOTA
python用于url解码和中文解析的小脚本(python url decoder)
2013/08/11 Python
wxpython中Textctrl回车事件无效的解决方法
2016/07/21 Python
Python 实现12306登录功能实例代码
2018/02/09 Python
Python利用正则表达式实现计算器算法思路解析
2018/04/25 Python
基于Python的Post请求数据爬取的方法详解
2019/06/14 Python
linux环境下Django的安装配置详解
2019/07/22 Python
python读取word 中指定位置的表格及表格数据
2019/10/23 Python
使用pickle存储数据dump 和 load实例讲解
2019/12/30 Python
python爬虫模块URL管理器模块用法解析
2020/02/03 Python
深入剖析HTML5 内联框架iFrame
2016/05/04 HTML / CSS
巴西最大的在线约会网站:ParPerfeito
2018/07/11 全球购物
2014年社区居委会主任重阳节讲话稿
2014/09/25 职场文书
2014年企业工会工作总结
2014/11/12 职场文书
go原生库的中bytes.Buffer用法
2021/04/25 Golang
Vue中foreach数组与js中遍历数组的写法说明
2021/06/05 Vue.js