扫码枪输入mysql_在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...

});

}

}

作者：mytac

链接：https://www.jianshu.com/p/232981dbcddc