Question

我的React组件中有一个click事件处理程序，并且希望在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

我正在使用vanilla js方法addEventListener和removeEventListener执行此操作。

添加

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

去除：

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

React事件处理程序未删除

1 个答案: