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

Question

在使用像 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);
      }
    };

Answer 1

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

另外，在render 中连接事件处理程序肯定不是最佳实践。 如果您出于某种原因需要将处理程序连接到document，您可以在componentDidMount 中执行此操作（然后在componentWillUnmount 中删除它）。