javascript - 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));