0

I'm making a Chrome extension that inserts 2 different React extensions on to the page. I'd like to keep each of them in sync by sending the 2nd one an event with appropriate data when something else is selected in the first one.

Is there a best practice when it comes to sending events to other components?

I tried this from the first:

evt = new CustomEvent("selectedEmailChange", {
  detail: {
    email: data.email
  }
});
window.dispatchEvent(evt);

And then in the 2nd:

  componentDidMount: function() {
    this.listenForEmailChange();
  },
  componentWillUnmount: function() {
    window.removeEventListener("selectedEmailChange", this.handleEmailChange, false);
  },
  listenForEmailChange: function() {
    window.addEventListener("selectedEmailChange", this.handleEmailChange, false);
  },
  handleEmailchange: function() {
    debugger
    console.log("i heard you dog!");
  },

But nothing's being caught in the 2nd.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
brandonhilkert
  • 4,205
  • 5
  • 25
  • 38
  • Looks like subscribing to events in componentDidMount is the best practice... http://facebook.github.io/react/tips/communicate-between-components.html – pherris Nov 13 '14 at 22:59
  • try window.postMessage instead - I'm guessing as an extension you cannot publish a message like that. http://stackoverflow.com/questions/9602022/chrome-extension-retrieving-gmails-original-message/9636008#9636008 – pherris Nov 13 '14 at 23:02
  • @pherris i use it communicate with the host page in other places and it definitely works. – brandonhilkert Nov 14 '14 at 01:04

1 Answers1

0

Gaaah! handleEmailchange should be handleEmailChange (capital 'C').

brandonhilkert
  • 4,205
  • 5
  • 25
  • 38