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

触发原理原理就是监听键盘输入，比如扫一个为6970596130126的69条形码，用扫码枪扫一下会在

触发原理

原理就是监听键盘输入，比如扫一个为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...
 });
 }
}

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