您好,登錄后才能下訂單哦!
觸發(fā)原理
原理就是監(jiān)聽鍵盤輸入,比如掃一個為6970596130126
的69條形碼,用掃碼槍掃一下會在光標位置依次輸出:
6
9
7
0
5
9
6
1
3
0
2
6
但這不是完整的,所以需要寫一個函數(shù)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階段移除監(jiān)聽器時,需要傳遞函數(shù)名,否則無法移除?。∵@是非常值得注意的一點。
完整使用
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... }); } }
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持億速云。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。