移除事件后触发滚动事件监听器

Question

我正在使用React构建的组件中的窗口对象上使用滚动事件。 我在componentDidMount()生命周期方法中添加了侦听器。

componentDidMount() {
window.addEventListener('scroll',this.handleScrollChange);
}

现在，我有一个按钮，可以在单击事件上滚动到某个位置。

当我单击按钮时，将触发以下功能：

window.removeEventListener('scroll', this.handleScrollChange);
    this.changePageUrl(currentData);
    // Add it back again.

    this.setState(
      {
       currentData
      },
      () => {
        window.scrollTo({
          top: currentTop + 100,
          behavior: 'smooth',
        });
        setTimeout(() => {
          window.addEventListener('scroll', this.handleScrollChange);
        }, 10000);
      },
    );

即使我将setTimeout增加到10000，我的滚动事件更改处理函数this.handleScrollChange也会被触发，并且滚动事件不会被删除。

阅读其他问题，我已经在构造函数中绑定了函数，因此对函数的引用不是问题：

constructor(props) {
super(props)
this.handleScrollChange = this.handleScrollChange.bind(this);
}

在下面的示例中可以看到复制的代码： https://stackblitz.com/edit/react-djblfj?file=index.js

如何在点击按钮后删除事件监听器，并在click滚动完成后再次添加回事件监听器？