React自定義事件偵聽器

我正在編寫一個Chrome擴展，在每封電子郵件的「答覆」按鈕旁放置一個按鈕。主頁上的其他地方是主React組件。當部件載荷，我添加偵聽自定義事件：React自定義事件偵聽器

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

組件被放置在每個線程的會話視圖：

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

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

我的情況下放置該按鈕在每封電子郵件和設置。所以，當然，如果你在收件箱之間，然後回到一個轉換，插入另一個組件。因此，舊的聽衆不會被刪除，所以多次事件第二次啓動。

我嘗試添加以下之前，我安裝監聽器：

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

但是，當我檢查監聽器事件進行去除後，並prioring再次添加它，它仍然存在。

所以我認爲有2個問題，有沒有更好的方法來做到這一點將成爲組件外的流氓按鈕？如果不是，我如何確保多個事件不會因此而觸發？

來源

2014-10-01 brandonhilkert

我想你會發現this.handleFileEmail不一定是相同的功能，因爲你添加/刪除組件。

請嘗試移除componentWillUnmount中的偵聽器。

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

來源

2014-10-01 17:17:56 rfunduk

我試過了，但它似乎沒有被觸發，因爲它從Gmail的對話視圖轉到了他們的收件箱視圖。所以我甚至不知道他們如何處理這些元素。你會期望'componentWillUnmount'在這種情況下被擊中？ – brandonhilkert 2014-10-01 20:00:38

此外，該組件正被添加到對話視圖中，並且該組件是偵聽按鈕事件的組件。所以在我看來，它好像是同一個組件。但也許我錯了... – brandonhilkert 2014-10-01 20:02:09

嗯，所以我覺得我對設置感到困惑。你在gmail的UI之外有你自己的反應組件，但是你將另一個反應組件插入到gmail的UI中，對吧？ – rfunduk 2014-10-01 21:17:24

React自定義事件偵聽器

回答

相關問題