淺談在react中如何實現(xiàn)掃碼槍輸入
更新時間：2018年07月04日 10:48:03 作者：張君卓
這篇文章主要介紹了淺談在react中如何實現(xiàn)掃碼槍輸入，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
觸發(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...
});
}
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了簡單的React SSR服務器渲染實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要為大家詳細介紹了React函數(shù)式組件與類組件的不同，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
本文主要介紹了React中使用axios發(fā)送請求的幾種常用方法，主要介紹了get和post請求，具有一定的參考價值，感興趣的可以了解一下2021-08-08
詳解React?如何防止?XSS?攻擊論$$typeof?的作用
這篇文章主要介紹了詳解React?如何防止?XSS?攻擊論$$typeof?的作用，文章圍繞主題展開詳細的內容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-07-07
使用 React 和 Threejs 創(chuàng)建一個VR全景項目的過程詳解
這篇文章主要介紹了使用 React 和 Threejs 創(chuàng)建一個VR全景項目的過程詳解,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-04-04
某些情況下需要在典型數(shù)據(jù)流外強制修改子代。要修改的子代可以是 React 組件實例，也可以是 DOM 元素。這時就要用到refs來操作DOM，本文詳細的介紹一下使用，感興趣的可以了解一下2021-06-06
這篇文章主要介紹了React中父組件如何獲取子組件的值或方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
React使用Canvas繪制大數(shù)據(jù)表格的實例代碼
之前一直想用Canvas做表格渲染的,最近發(fā)現(xiàn)了一個很不錯的Canvas繪圖框架Leafer,api很友好就試著寫了一下,文中有詳細的代碼示例供大家參考,感興趣的小伙伴可以自己動手試試2023-09-09
這篇文章主要為大家介紹了React源碼調試方式實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
React實現(xiàn)類似淘寶tab居中切換效果的示例代碼
這篇文章主要介紹了React實現(xiàn)類似淘寶tab居中切換效果,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-06-06