title: How to check if a component has been clicked after an onblur event in React
body: <p>Hey guys I have an issue where I have a search bar with a dropdown menu. As of right now, I would like to close the dropdown menu whenever an onBlur events occurs on the Search Bar. (which is just an input tag) But I would also like it to detect when it has clicked my drop down menu. And if so, trigger some other function. </p>
  
  <p>Here is my search bar which will call onBlur prop before the onClickLocationSearch prop, which is not what I want because  onClickLocationSearch and the onBlur event handle different functions. In other words, I want the onBlur event to check whether it has clicked on another component or not. </p>
  
  <p>Here is the Search Bar with the onBlur event: </p>
  
  <pre><code>&lt;SearchBar
  onFocus={this.handleOpenLocationSearch}
  placeholder={this.state.placeholder}
  onBlur={this.handleCloseLocationSearch}
  /&gt;
  </code></pre>
  
  <p>Here is the Results/Drop down menu. </p>
  
  <pre><code>&lt;Results
  onClickLocationSearch={this.handleClickLocationSearch}
  /&gt;
  </code></pre>
  
  <p>onBlur will get called because it gets called regardless of whether you click on the Results component or not.  </p>
  
  <p>Here are the functions that they call: </p>
  
  <pre><code>public handleClickLocationSearch() {
      this.setState({queryParam: '/blah'});
      this.setState({ query: '' });
      this.setState({ editing: false });
    }
  </code></pre>
  
  <pre><code>public handleCloseLocationSearch() {
      this.setState({ editing: false });
      this.setState({ query: '' });
  }
  </code></pre>
  
  <ol>
  <li>I would like to call the handleClickLocationSearch if the user clicks on the Results component and loses focus on the input tag,</li>
  <li>If the user loses focus on the input tag and doesn't click on the Results component, call the handleCloseLocationSearch.</li>
  </ol>