javascript - Reactjs，删除 componentWillUnmount 上的事件监听器，

Question

我有一个小型 React 应用程序。在我的一个主要组件中，我在 componentDidMount 上添加了一个事件监听器，但是当我尝试在 componentWillUnmount 上删除它时，它似乎并没有这样做。我什至尝试将它们一个接一个地放置，但它似乎仍然没有被移除。

这是我的情况的示例代码(从真实情况中减少)

listenerF(e){
  console.log('im scrolling!'
  //..actually does other stuff
}

componentDidMount(){
    window.addEventListener('scroll', e => this.listenerF(e))
}

componentWillUnmount(){
    window.removeEventListener('scroll',e=>this.listenerF(e))
    console.log('unmounted')
}

我怀疑它可能是充当匿名函数的箭头函数，因此 removeEventListener 没有正确匹配这些函数。

我尝试了一些替代方法来添加事件监听器，仅使用函数调用或不使用箭头函数，但它似乎并没有那样工作，所以我不确定我的语法或设置事件可能有什么问题添加正确，但不能删除它

Answer 1

React 会自动将事件注入(inject)您的处理程序，无需将其包装在箭头函数中即可传递事件，问题是 React 没有引用您传递给处理程序的函数。

listenerF(e) { // dont forget to add the event as a parameter here
  console.log(e);
  console.log("im scrolling!");
}

componentDidMount() {
  window.addEventListener("scroll", this.listenerF);
}

componentWillUnmount() {
  window.removeEventListener("scroll", this.listenerF);
  console.log("unmounted");
}