觸發原理

原理就是監聽鍵盤輸入，比如掃一個為6970596130126的69條形碼，用掃碼槍掃一下會在光標位置依次輸出：

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

但這不是完整的，所以需要寫一個函數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階段移除監聽器時，需要傳遞函數名，否則無法移除！！這是非常值得注意的一點。

完整使用

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...    });  }}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。