Question

在使用像React这样的框架时直接访问文档Object是不好的做法。

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

这是我的代码

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

Answer 1

无论您是否使用React，

document.onkeypress都可能是糟糕的做法。相反，document.addEventListener("keypress", ...)（并确保只执行一次。）

另外，在render中挂钩事件处理程序肯定不是最佳做法。如果您出于某种原因需要将处理程序挂钩到document，您可以在componentDidMount中执行此操作（并在componentWillUnmount中将其删除）

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

这是我的代码

1 个答案: