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);
  });

组件放在每个线程的对话视图中。因此，当然，如果您进入收件箱，然后返回转换，则会插入另一个组件。因此，旧的听众不会被删除，因此多次事件会在第二次触发。

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

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

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

所以我认为有两个问题，对于一个生活在组件之外的流氓按钮，有没有更好的方法呢？如果没有，我怎样才能确保多个事件不会因此而触发？

Answer 1

我认为您会发现this.handleFileEmail不一定是相同的功能，因为您要添加/删除组件。

请尝试删除componentWillUnmount中的侦听器。

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

反应自定义事件侦听器

1 个答案: