Question

我要添加到听者一个用于窗口，另一个用于元件和两个必须是使当下拉菜单出现，所以我得到了对element（scroll）的引用，我需要在回调函数中传递它以删除侦听器，

 <a
     href="#"
     onClick={e => {
      e.preventDefault();
      e.stopPropagation();
      this.openMenu(scroll);
    }}
   >
    <i className="fas fa-ellipsis-h" />
 </a>

openMenu = (scroll,e) => {
 this.setState(prevState => ({ showMenu: !prevState.showMenu }),
  () => {
    document.addEventListener("click", this.closeMenu);
    scroll.addEventListener('scroll',() => this.closeMenu(scroll))
   }
);
};

  closeMenu = (scroll,e) => {
    this.setState({ showMenu: false }, () => {
     document.removeEventListener("click", this.closeMenu);
     scroll.removeEventListener('scroll',() => this.closeMenu(scroll))
    });
   };

在这种情况下，我无法删除侦听器，因为他与原始侦听器没有相同的名称，那么我该如何解决呢？

Answer 1

我认为在这种情况下，即使在状态更新之前也可以删除事件处理程序。这使您可以“内联”事件处理程序的删除：

openMenu = (scroll,e) => {
  this.setState(
    prevState => ({ showMenu: !prevState.showMenu }),
    () => {
      const component = this;
      function handler() {
        component.closeMenu();
        document.removeEventListener('click', handler);
        scroll.removeEventListener('scroll', handler);
      }
      document.addEventListener('click', handler);
      scroll.addEventListener('scroll', handler);
    }
  );
};

closeMenu = () => {
  this.setState({ showMenu: false });
};

Answer 2

考虑使用组件类实例“根据需要”定义共享的scrollHandler函数，在添加和删除{{1}的侦听器时，该函数将同时传递给addEventListener()和removeEventListener() }。

这种方法允许您将scroll的上下文或“关闭”保留在滚动事件处理程序内部，这意味着您可以将openMenu()变量传递给scroll：

this.closeMenu

希望这会有所帮助！

如何将参数传递给addEventListener

2 个答案: