北京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与数组、对象对比的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2018-03-03
本篇文章主要介绍了React组件生命周期，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
这篇文章主要介绍了css与javascript跨浏览器兼容性,包括常见的css兼容性问题与javascript兼容性问题,以及IE与Firefox等常用浏览器的兼容性分析,需要的朋友可以参考下2014-09-09
单击复制文字的js找了很久，由于之前没有接触过，完全不知道兼容ie及标准dom浏览器，不仅仅要通过js，而且需要flash的帮忙，下面与大家分享下具体的实现方法2013-07-07
这篇文章主要介绍了正则中的回溯定义与用法,结合实例形式分析了回溯的概念、功能并提供了JS与java实现方法,需要的朋友可以参考下2016-12-12
借用Google的Javascript API Loader来加速你的网站
加速页面加载速度有一个方法就是把CSS和JS文件放到另外一个单独的服务器上，这样在访问量比较大的情况下可以分担主服务器的压力2009-01-01
关于react-router/react-router-dom v4 history不能访问问题的解
这篇文章主要给大家介绍了关于react-router/react-router-dom v4 history不能访问问题的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧。2018-01-01
这篇文章主要介绍了原生JavaScript实现Ajax的几种方法，感兴趣的小伙伴们可以参考一下2016-04-04
要通过元素访问样式表，那么就应该先确定是哪个元素。直接访问样式表在该样式块里找相应的样式规则，最后在该样式规则里找相应的样式2014-07-07
这篇文章主要为大家介绍了JavaScript设计模式中的享元模式，对JavaScript设计模式感兴趣的小伙伴们可以参考一下2016-01-01
最新评论