浅谈在react中如何实现扫码枪输入
触发原理
成都创新互联技术团队十余年来致力于为客户提供网站制作、成都网站设计、高端网站设计、营销型网站、搜索引擎SEO优化等服务。经过多年发展,公司拥有经验丰富的技术团队,先后服务、推广了千余家网站,包括各类中小企业、企事单位、高校等机构单位。
原理就是监听键盘输入,比如扫一个为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... }); } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。
文章名称:浅谈在react中如何实现扫码枪输入
新闻来源:http://scyanting.com/article/ghcdpj.html