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

更新時(shí)間：2018年07月04日 10:48:03 作者：張君卓

這篇文章主要介紹了淺談在react中如何實(shí)現(xiàn)掃碼槍輸入，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

觸發(fā)原理

原理就是監(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ù)名，否則無(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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

react-router-dom入門使用教程(路由的模糊匹配與嚴(yán)格匹配)
這篇文章主要介紹了react-router-dom入門使用教程,主要介紹路由的模糊匹配與嚴(yán)格匹配，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-08-08
react antd如何防止一份數(shù)據(jù)多次提交
這篇文章主要介紹了react antd如何防止一份數(shù)據(jù)多次提交問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
React+Koa實(shí)現(xiàn)文件上傳的示例
這篇文章主要介紹了React+Koa實(shí)現(xiàn)文件上傳的示例，幫助大家更好的理解和學(xué)習(xí)使用React，感興趣的朋友可以了解下
2021-04-04
react中事件處理與柯里化的實(shí)現(xiàn)
本文主要介紹了react中事件處理與柯里化的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-05-05
React?Native?加載H5頁(yè)面的實(shí)現(xiàn)方法
這篇文章主要介紹了React?Native?加載H5頁(yè)面的實(shí)現(xiàn)方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2022-04-04
使用React實(shí)現(xiàn)輪播效果組件示例代碼
React剛出來不久，組件還比較少，不像jquery那樣已經(jīng)有很多現(xiàn)成的插件了，于是自己寫了一個(gè)基于React的輪播效果組件，現(xiàn)在分享給大家，有需要的可以參考借鑒。
2016-09-09
React實(shí)現(xiàn)監(jiān)聽粘貼事件并獲取粘貼板中的截圖
這篇文章主要介紹了React實(shí)現(xiàn)監(jiān)聽粘貼事件并獲取粘貼板中的截圖方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
React Native中實(shí)現(xiàn)動(dòng)態(tài)導(dǎo)入的示例代碼
隨著業(yè)務(wù)的發(fā)展，每一個(gè) React Native 應(yīng)用的代碼數(shù)量都在不斷增加。作為一個(gè)前端想到的方案自然就是動(dòng)態(tài)導(dǎo)入（Dynamic import）了，本文介紹了React Native中實(shí)現(xiàn)動(dòng)態(tài)導(dǎo)入的示例代碼，需要的可以參考一下
2022-06-06
react+antd樹選擇下拉框中增加搜索框
這篇文章主要介紹了react+antd樹選擇下拉框中增加搜索框方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06
React使用Mobx6.x共享狀態(tài)問題
這篇文章主要介紹了React使用Mobx6.x共享狀態(tài)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10