title: Best practice accessing document object in ReactJS
body: <p>Is it bad practice to access the document Object directly when working with a framework like React.  </p>
  
  <p>I am using an external barcode scanner and I want to detect when number is scanned and populate a specific field.  I want to avoid tracking what field is in focus.</p>
  
  <h3>Here is my code</h3>
  
  <pre><code> render(){
      ....
      document.onkeypress = (e) =&gt; {
        e = e || window.event;
        const digit = e.key;
        if(e.target.nodeName === 'BODY' &amp;&amp; digit.match(/[0-9]/i)){
          console.log(digit);
        }
      };
  </code></pre>