React事件处理程序未被删除

Question

我在我的React组件中有一个单击事件处理程序，并希望在hideLeft 发生时删除事件处理程序，但无法使用$(document).unbind('click', this.hideLeft.bind(this))这样做。目前只能通过执行$(document).unbind('click')来删除点击事件处理程序。

我怎样才能避免这种情况，只删除与hideLeft函数相关的单击事件处理程序?

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 (
               <Sticky>
                    <header className='app-header'>
                      <LeftPanel visibility={this.state.panel_visible} showLeft={e => this.showLeft()} 
                        hideLeft={e => this.hideLeft()} />
                      <button onClick={e => this.showLeft()}>Show Left Menu!</button>
                      <button className='btn btn-default logout' onClick={e => this.logOut()}>Log Out</button>
                      <h1>Some header </h1>
                    </header>
               </Sticky>
           );
    }
}

Answer 1

我正在使用香草js方法addEventListener和removeEventListener。

添加

document.addEventListener('click', this.hideLeft.bind(this));

删除:

document.removeEventListener('click', this.hideLeft.bind(this));