国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

淺談在react中如何實現掃碼槍輸入

2019-11-19 13:33:39
字體:
來源:轉載
供稿:網友

觸發原理

原理就是監聽鍵盤輸入,比如掃一個為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...    });  }}

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 图们市| 洪泽县| 沂南县| 青岛市| 长宁县| 花莲县| 清镇市| 丹东市| 静海县| 菏泽市| 定兴县| 鹤壁市| 恩平市| 玛沁县| 阿瓦提县| 隆化县| 二连浩特市| 桑植县| 紫金县| 福州市| 嘉义市| 偃师市| 阜平县| 贵溪市| 潼关县| 信丰县| 壤塘县| 涿州市| 延津县| 东安县| 昌都县| 波密县| 江都市| 宿州市| 奉新县| 凤翔县| 杨浦区| 盐山县| 定南县| 南川市| 长治县|