觸發原理
原理就是監聽鍵盤輸入,比如掃一個為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... }); }}以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。
新聞熱點
疑難解答