觸發(fā)原理
原理就是監(jiān)聽(tīng)鍵盤(pán)輸入,比如掃一個(gè)為6970596130126的69條形碼,用掃碼槍掃一下會(huì)在光標(biāo)位置依次輸出:
6
9
7
0
5
9
6
1
3
0
2
6
但這不是完整的,所以需要寫(xiě)一個(gè)函數(shù)scanEvent來(lái)整理收集到的每個(gè)編號(hào)。
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中的坑
當(dāng)我們想在willComponentUnMount階段移除監(jiān)聽(tīng)器時(shí),需要傳遞函數(shù)名,否則無(wú)法移除!!這是非常值得注意的一點(diǎn)。
完整使用
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... }); }}以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持VeVb武林網(wǎng)。
新聞熱點(diǎn)
疑難解答