javascript - 在 ReactJS 中访问文档对象的最佳实践

标签 javascript reactjs barcode-scanner

在使用像 React 这样的框架时,直接访问文档对象是一种不好的做法吗?

我正在使用外部条形码扫描仪,我想检测何时扫描数字并填充特定字段。我想避免跟踪焦点所在的字段。

这是我的代码

 render(){
    ....
    document.onkeypress = (e) => {
      e = e || window.event;
      const digit = e.key;
      if(e.target.nodeName === 'BODY' && digit.match(/[0-9]/i)){
        console.log(digit);
      }
    };

最佳答案

document.onkeypress 无论您是否使用 React,都可能是不好的做法。相反,document.addEventListener("keypress", ...)(并确保只执行一次。)

另外,在 render 中连接事件处理程序肯定不是最佳实践。 如果您出于某种原因需要将处理程序连接到文档,您可以在componentDidMount 中执行此操作(你会在 componentWillUnmount 中删除它)。

关于javascript - 在 ReactJS 中访问文档对象的最佳实践,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48992135/

相关文章:

JavaScript 无法用 URL 替换字符串

reactjs - 如何在带有 Typescript 的 React 项目中组织类型定义

python - 使用带有 Python/Pyserial 的 C/C++ DLL 与 Opticon 条码阅读器通信

android - 如何更改扫描 Zbar 的区域?

Flutter/Dart 数据矩阵代码扫描库

javascript - 仅生成一张电子表格的 PDF

Javascript正则表达式匹配CSS选择器

javascript - 根据滚动位置显示/隐藏子标题

javascript - 测试 React-Router v1.0.0 href

reactjs - typescript 指向函数