title: Programmatically cause onBlur to trigger in react
body: <p>I use onBlur to close a dropdown, but I also want to handle a click handler of an li which is render within, setState won't work here, the behavior is broken when user try to open the dropdown again, try it here:</p>
  
  <p><a href="http://jsfiddle.net/ur1rbcrz" rel="nofollow noreferrer">http://jsfiddle.net/ur1rbcrz</a></p>
  
  <p>My code:</p>
  
  <pre><code>toggleDropdown = () =&gt; {
      this.setState({
          openDropdown: !this.state.openDropdown
      })
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;div tabIndex="0" onFocus={this.toggleDropdown} onBlur={this.toggleDropdown}&gt;
            MyList
          &lt;ul className={this.state.openDropdown ? 'show' : 'hide'}&gt;
            &lt;li&gt;abc&lt;/li&gt;
            &lt;li&gt;123&lt;/li&gt;
            &lt;li onClick={()=&gt; this.setState({openDropdown:false})}&gt;xyz&lt;/li&gt; {/* not working */}
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  </code></pre>