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

前端之家收集整理的这篇文章主要介绍了浅谈在react中如何实现扫码枪输入前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

触发原理

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

6 9 7 0 5 9 6 1 3 0 2 6

但这不是完整的,所以需要写一个函数scanEvent来整理收集到的每个编号。

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阶段移除监听器时,需要传递函数名,否则无法移除!!这是非常值得注意的一点。

完整使用

componentWillUnmount() {
window.removeEventListener('keypress',false);
}

scanWrapper(e) {
scanEvent(e,(code) => {
// to do something...
});
}
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的JavaScript相关文章