javascript - react 自定义事件监听器

Question

我正在编写一个 Chrome 扩展，在每封电子邮件的“回复”按钮旁边放置一个按钮。页面的其他地方是主要的 React 组件。当组件加载时，我将监听器添加到自定义事件:

  componentDidMount: function() {
    this.listenForFileEmailEvent();
  },

  listenForFileEmailEvent: function() {
    window.addEventListener("fileThisEmail", this.handleFileEmail, false);
  },

我将按钮放在每封电子邮件中并设置事件:

  $(document).on("click", ".file-this-email", function(e) {
    var email = $(e.target).parents(".gs").find('.gD').first().attr("email");
    var name = $(e.target).parents(".gs").find('.gD').first().attr("name");
    var content = $(e.target).parents(".gs").find(".adP").first().text();

    evt = new CustomEvent("fileThisEmail", {
      detail: {
        name: name,
        email: email,
        content: content
      }
    });

    window.dispatchEvent(evt);
  });

该组件放置在每个线程的对话 View 中。因此，很自然地，如果您在收件箱之间进行转换，然后返回转换，则会插入另一个组件。因此不会删除旧的监听器，因此会第二次触发多个事件。

我尝试在设置监听器之前添加以下内容:

  listenForFileEmailEvent: function() {
    window.removeEventListener("fileThisEmail", this.handleFileEmail, false);
    window.addEventListener("fileThisEmail", this.handleFileEmail, false);
  },

但是当我在删除之后检查监听器事件时，在再次添加它之前，它仍然存在。

所以我认为有 2 个问题，对于将存在于组件外部的流氓按钮，是否有更好的方法来执行此操作？如果没有，我如何确保不会为此触发多个事件？

Answer 1

我认为您会发现 this.handleFileEmail 不一定是相同的函数，因为您正在添加/删除组件。

尝试移除 componentWillUnmount 中的监听器。

componentWillUnmount: function() {
  window.removeEventListener("fileThisEmail", this.handleFileEmail, false);
}