浅谈在react中如何实现扫码枪输入
触发原理
原理就是监听键盘输入，比如扫一个为6970596130126的69条形码，用扫码枪扫一下会在光标位置依次输出：
6
9
7
0
5
9
6
1
3
0
2
6
但这不是完整的，所以需要写一个函数scanEvent来整理收集到的每个编号。
letcode='';
letlastTime,
nextTime,
lastCode,
nextCode;
functionscanEvent(e,cb){
nextCode=e.which;
nextTime=newDate().getTime();
if(lastCode!=null&&lastTime!=null&&nextTime-lastTime<=30){
code+=String.fromCharCode(lastCode);
}elseif(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阶段移除监听器时，需要传递函数名，否则无法移除！！这是非常值得注意的一点。
完整使用
classSampleextendsReact.Component{
componentDidMount(){
window.addEventListener('keypress',this.scanWrapper,false);
}
componentWillUnmount(){
window.removeEventListener('keypress',this.scanWrapper,false);
}
scanWrapper(e){
scanEvent(e,(code)=>{
//todosomething...
});
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。