在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...
        });
    }
}