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

该组件被放置在每个线程的会话视图中。因此，很自然，如果你在收件箱之间切换，然后返回到转换，就会插入另一个组件。因此，旧的侦听器不会被删除，因此多个事件第二次启动。

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

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