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

2019-11-19 13:33:39

字体：大中小

来源：转载

供稿：网友

触发原理

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

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

上一篇：解决vue项目打包后提示图片文件路径错误的问题

下一篇：Redux实现组合计数器的示例代码