title: React event handler not removed
body: <p>I have a click event handler in my React component and wish to remove the event handler when <code>hideLeft </code>occurs, but am unable to do so with <code>$(document).unbind('click', this.hideLeft.bind(this))</code>. Currently can only remove the click event handler by doing <code>$(document).unbind('click')</code>.</p>
  <p>How can I avoid this and only remove click event handlers associated with the <code>hideLeft</code> function?</p>
  <pre><code>class Header extends Component {
      constructor(props, context) {
          super(props, context); 
          this.state = {
              panel_visible: false
          };
      }
  
      logOut() {
          console.log('logged out');
      }
  
      hideLeft(event) {
          if (!$(event.target).closest('.menu').length) {
              $(document).unbind('click');                      
              this.setState({
                  panel_visible: false
              }); 
          }
      }
  
      showLeft() {
          this.setState({
              panel_visible: true
          });
          $(document).bind('click', this.hideLeft.bind(this));    
      }
  
  
      render() {
         return (
                 &lt;Sticky&gt;
                      &lt;header className='app-header'&gt;
                        &lt;LeftPanel visibility={this.state.panel_visible} showLeft={e =&gt; this.showLeft()} 
                          hideLeft={e =&gt; this.hideLeft()} /&gt;
                        &lt;button onClick={e =&gt; this.showLeft()}&gt;Show Left Menu!&lt;/button&gt;
                        &lt;button className='btn btn-default logout' onClick={e =&gt; this.logOut()}&gt;Log Out&lt;/button&gt;
                        &lt;h1&gt;Some header &lt;/h1&gt;
                      &lt;/header&gt;
                 &lt;/Sticky&gt;
             );
      }
  }
  </code></pre>