title: How to avoid DOM dependencies in React components?
body: <p>I have a dropdown like component. On click of the dropdown, it opens up. When the user clicks anywhere else on the document, the dropdown closes. My component has two DOM dependencies:</p>
  
  <p>a) It uses <code>document.addEventListener</code> to hook the click event.</p>
  
  <p>b) In the <code>onClick</code> handler it compares <code>event.target</code> with its own DOM node like this:</p>
  
  <pre><code>const me = ReactDOM.findDOMNode(this);
  const isMyChild = $(event.target).parents().filter((i, el) =&gt; el === me).length === 1;
  
  if( isMyChild ) {
    //don't close
    return;
  } else {
    close();
  }
  </code></pre>
  
  <p>How do I do this "the React way" in order to remove (or minimize) the dependencies on the DOM?</p>