java扫码枪键盘_浅谈在react中如何实现扫码枪输入

触发原理

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

但这不是完整的，所以需要写一个函数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...

});

}

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

本文标题: 浅谈在react中如何实现扫码枪输入

本文地址: http://www.cppcns.com/ruanjian/java/231980.html

java扫码枪键盘_浅谈在react中如何实现扫码枪输入相关推荐

servlet对java的重要性_浅谈Servlet技术中的Listener起到的作用
Listener是在servlet2.3中加入的,主要用于对Session,request,context等进行监控. 使用Listener需要实现响应的接口.触发Listener事件的时候,tomc ...
java 定时任务怎么关闭_浅谈springboot项目中定时任务如何优雅退出
在一个springboot项目中需要跑定时任务处理批数据时,突然有个Kill命令或者一个Ctrl+C的命令,此时我们需要当批数据处理完毕后才允许定时任务关闭,也就是当定时任务结束时才允许Kill命令生 ...
mysql declare与set的区别_浅谈MySQL存储过程中declare和set定义变量的区别
在存储过程中常看到declare定义的变量和@set定义的变量.简单的来说,declare定义的类似是局部变量,@set定义的类似全局变量. 1.declare定义的变量类似java类中的局部变量,仅 ...
mysql存储过程set什么意思_浅谈MySQL存储过程中declare和set定义变量的区别
在存储过程中常看到declare定义的变量和@set定义的变量.简单的来说,declare定义的类似是局部变量,@set定义的类似全局变量. 1.declare定义的变量类似java类中的局部变量,仅 ...
python中if和elif的区别_浅谈对python中if、elif、else的误解
今天下午在练习python时用了"if...if...else..."的分支结构,结果运行出来吓我一跳.原来我想当然的认为"if...if...else..." ...
python中分支语句elif与else的区别_浅谈对python中if、elif、else的误解
今天下午在练习python时用了"if...if...else..."的分支结构,结果运行出来吓我一跳.原来我想当然的认为"if...if...else..." ...
java对象头_浅谈java对象结构对象头 Markword
概述对象实例由对象头.实例数据组成,其中对象头包括markword和类型指针,如果是数组,还包括数组长度; | 类型 | 32位JVM | 64位JVM| | ------ ---- | ----- ...
java bitset用途_浅谈Java BitSet使用场景和代码示例
搜索热词 @H_502_0@一.什么是BitSet? @H_502_0@ 注:以下内容来自JDK API: @H_502_0@ BitSet类实现了一个按需增长的位向量.位Set的每一个组件都有一个b ...
java 多线程同步_浅谈Java多线程（状态、同步等）
Java多线程是Java程序员必须掌握的基本的知识点,这块知识点比较复杂,知识点也比较多,今天我们一一来聊下Java多线程,系统的整理下这部分内容. 一.Java中线程创建的三种方式: 1．通过继承T ...

java扫码枪键盘_浅谈在react中如何实现扫码枪输入

java扫码枪键盘_浅谈在react中如何实现扫码枪输入相关推荐

最新文章

热门文章