title: I want to monitor, whether the click happened inside or outside of the component
body: <p>I want to monitor, whether the click happened inside or outside of the component.</p>
  
  <p>But i am getting error "Uncaught TypeError: Cannot read property 'contains' of undefined"</p>
  
  <pre><code>export default class M1Component extends React.Component{
    constructor(props) {
      super(props);
    }
  
    componentWillMount() {
      document.addEventListener('click', this.handleClick, false);
    }
  
    componentWillUnmount() {
      document.removeEventListener('click', this.handleClick, false);
    }
  
    handleClick = e =&gt; {
      if(this.node.contains(e.target)){
        console.log("component inside click");
        return;
      } else {
        console.log("component outside click");
      }
    }
  
    render() { 
      return(
          &lt;div className="form-group" ref={node =&gt; this.node = node}&gt;
              ...
          &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>When ever I am trying to print those values,</p>
  
  <pre><code>console.log(e.target); // getting the div value
  console.log(this.refs.node); // getting undefined
  </code></pre>