真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

淺談在react中如何實(shí)現(xiàn)掃碼槍輸入

觸發(fā)原理

成都創(chuàng)新互聯(lián)技術(shù)團(tuán)隊(duì)十余年來致力于為客戶提供網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)、高端網(wǎng)站設(shè)計(jì)、營銷型網(wǎng)站、搜索引擎SEO優(yōu)化等服務(wù)。經(jīng)過多年發(fā)展，公司擁有經(jīng)驗(yàn)豐富的技術(shù)團(tuán)隊(duì)，先后服務(wù)、推廣了千余家網(wǎng)站，包括各類中小企業(yè)、企事單位、高校等機(jī)構(gòu)單位。

原理就是監(jiān)聽鍵盤輸入，比如掃一個(gè)為6970596130126的69條形碼，用掃碼槍掃一下會(huì)在光標(biāo)位置依次輸出：

6
9
7
0
5
9
6
1
3
0
2
6

但這不是完整的，所以需要寫一個(gè)函數(shù)scanEvent來整理收集到的每個(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)聽器時(shí)，需要傳遞函數(shù)名，否則無法移除！！這是非常值得注意的一點(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í)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

文章題目：淺談在react中如何實(shí)現(xiàn)掃碼槍輸入
轉(zhuǎn)載注明：http://weahome.cn/article/ghcdpj.html