浅谈在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 相关文章推荐
Jquery CheckBox全选方法代码附js checkbox全选反选代码
Jun 09 Javascript
jQuery实现为图片添加镜头放大效果的方法
Jun 25 Javascript
js滑动提示效果代码分享
Mar 10 Javascript
通过javascript进行UTF-8编码的实现方法
Jun 27 Javascript
JavaScript动态添加css样式和script标签
Jul 19 Javascript
详解打造 Vue.js 可复用组件
Mar 24 Javascript
详解vue项目构建与实战
Jun 27 Javascript
webpack多入口文件页面打包配置详解
Jan 09 Javascript
Express进阶之log4js实用入门指南
Feb 10 Javascript
JavaScript 隐性类型转换步骤浅析
Mar 15 Javascript
vue+element实现打印页面功能
May 20 Javascript
js实现贪吃蛇小游戏
Oct 29 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
《星际争霸》各版本雷兽特点图文解析 雷兽不同形态一览
2020/03/02 星际争霸
PHP5与MySQL数据库操作常用代码 收集
2010/03/21 PHP
php结合表单实现一些简单功能的例子
2011/06/04 PHP
php实现根据字符串生成对应数组的方法
2014/09/22 PHP
简要剖析PHP的Yii框架的组件化机制的基本知识
2016/03/17 PHP
php 实现301重定向跳转实例代码
2016/07/18 PHP
PHP使用GD库输出汉字的方法【测试可用】
2016/11/10 PHP
Javascript &amp; DHTML 实例编程(教程)DOM基础和基本API
2007/06/02 Javascript
JSP跨iframe如何传递参数实现代码
2013/09/21 Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
2013/11/04 Javascript
js函数调用的方式
2014/05/06 Javascript
javascript解析json数据的3种方式
2014/05/08 Javascript
jQuery如何将选中的对象转化为原始的DOM对象
2014/06/09 Javascript
javascript HTML5 canvas实现打砖块游戏
2020/06/18 Javascript
JS实现的RGB网页颜色在线取色器完整实例
2016/12/21 Javascript
JS数组操作中的经典算法实例讲解
2017/07/26 Javascript
React-Native中props具体使用详解
2017/09/04 Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
2017/12/07 Javascript
详解Angular如何正确的操作DOM
2018/07/06 Javascript
微信小程序接入腾讯云验证码的方法步骤
2020/01/07 Javascript
js简单实现自动生成表格功能示例
2020/06/02 Javascript
[01:05:32]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第一局
2016/03/04 DOTA
python选择排序算法实例总结
2015/07/01 Python
使用Python的Scrapy框架十分钟爬取美女图
2016/12/26 Python
python 简单备份文件脚本v1.0的实例
2017/11/06 Python
python如何压缩新文件到已有ZIP文件
2018/03/14 Python
python小程序实现刷票功能详解
2019/07/17 Python
python数据归一化及三种方法详解
2019/08/06 Python
python3 mmh3安装及使用方法
2019/10/09 Python
Python使用docx模块实现刷题功能代码
2020/02/13 Python
英国内衣连锁店:Boux Avenue
2018/01/24 全球购物
Lookfantastic日本官网:英国知名护肤、化妆品和头发护理购物网站
2018/04/21 全球购物
打架检讨书400字
2014/01/17 职场文书
教师党员批评与自我批评发言稿
2014/10/15 职场文书
2014年财务科工作总结
2014/11/11 职场文书
2015年乡镇统计工作总结
2015/04/22 职场文书