反應自定義事件偵聽器

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