React custom event listener

Question

I'm writing a Chrome extension that places a button next to the "reply" button of each email. And elsewhere on the page is the main React component. When the component loads, I add listeners to a custom event:

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

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

I place the button in each email and setup the event:

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

The component is placed in the conversation view of each thread. So, naturally, if you go between the inbox, and then back to a conversion, another component is inserted. And thus the old listeners aren't removed, so multiple events fire the second time.

I tried to add the following before I setup the listener:

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

But when I inspect the listener events after removing, and prioring to adding it again, it is still there.

So I think there are 2 questions, is there a better way to do this for a rogue button that will live outside the component? And if not, how can I ensure multiple events don't fire for this?

rfunduk · Accepted Answer · 2014-10-01 17:17:56Z

3

I think you'll find that this.handleFileEmail isn't necessarily the same function since you are adding/removing the component.

Try removing the listener in componentWillUnmount instead.

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

answered Oct 1, 2014 at 17:17

rfunduk

30.5k5 gold badges61 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

brandonhilkert Over a year ago

I tried that, except it doesn't seem to be triggered because it's going from Gmail's conversation view to their inbox view. So I'm not even sure what they do with those elements. Would you expect componentWillUnmount to be hit in that case?

brandonhilkert Over a year ago

Also, the component is being added to the conversation view, and that same component is the one listening for events from the buttons. So it seems to me as though it would be the same component. But maybe I'm wrong...

rfunduk Over a year ago

Hmm, so I think I'm confused about the setup. You have your own react component outside of gmail's ui, but you're inserting another react component into gmail's ui, right?

brandonhilkert Over a year ago

You know what, I think I see what you're saying now about it being a different component. I have a feeling you're right. That's the thing, because I can unmount it, I have a feeling it just mounts a new one every time I load the conversation view. Is this a problem for performance/memory usage, and do you think there's any way around this?

brandonhilkert Over a year ago

That should've read, "That's the thing, because I CAN'T unmount it..."

|

Collectives™ on Stack Overflow

React custom event listener

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related