javascript - React JS removeEventListener 未触发

Question

我有两个函数，一个包含 addEventListener("click")，另一个包含删除

show() {
    console.log("SHOW FUNCTION")
    this.setState({
        listVisible: true
    })

    document.addEventListener("click", this.hide.bind(this));
}

hide() {
    console.log("HIDE FUNCTION")
    this.setState({
        listVisible: false
    })

    document.removeEventListener("click", this.hide.bind(this));
}

在初次单击时， show() 被触发，状态按预期更新，第二次单击后， hide() 被触发，一切正常。

当我再次单击(第三次单击)时，我的 console.logs 首先列出 show() ，然后列出两个 hide() 日志，从而将我的状态设置回 false(当它应该为 true 时)，就像第一个序列一样。

我不确定为什么会发生这种情况，几乎就像removeEventListener没有触发一样。也可能是“this”的上下文错误？

这是我的组件代码:

renderListItems() {
    const items = [];
    for (var i = 0; i < this.props.list.length; i++) {
        const item = this.props.list[i];
        items.push(<div className="option" onClick={() => this.select(item)}>
            <span>{item.name}</span>
            <i className="fa fa-check"></i>
        </div>);
    }
    return items;
}

render() {
    console.log("give me", this.state.listVisible)
    return (
        <div className={"dropdown-container" + (this.state.listVisible ? " show" : "")}>
            <div className={"dropdown-display" + (this.state.listVisible ? " clicked": "")} onClick={() => this.show()}>
                <span>
                    {this.state.selected.name}
                </span>
                <i className="fa fa-angle-down"></i>
            </div>
            <div className="dropdown-list">
                <div>
                    {this.renderListItems()}
                </div>
            </div>
        </div>
    )
}

Answer 1

每次调用.bind时，它都会创建一个新函数。您应该在创建组件时创建一次绑定(bind)函数，以便removeEventListener可以找到该函数。

您可以在 ES6 中绑定(bind)类方法:

hide = () => {

}

或者在你的构造函数中执行它:

constructor(...args) {
   super(...args);
   this.hide = this.hide.bind(this);
}

然后你的事件监听器可以简单地引用已经绑定(bind)的函数this.hide。