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

最新推荐文章于 2024-09-13 22:11:57 发布

mytac

最新推荐文章于 2024-09-13 22:11:57 发布

阅读量2.3k

点赞数

分类专栏： react 文章标签：扫码枪 react

本文链接：https://blog.csdn.net/qq_29311407/article/details/80897514

版权

react 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

触发原理

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

但这不是完整的，所以需要写一个函数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...
        });
    }
}