Listen to window.onmessage in React Component

user_514860 0
Viewed 1366

I'm trying to listen for a postmessage in my react class. It isn't working.

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.handleMessage = this.handleMessage.bind(this);
  }
  componentDidMount(){
    window.addEventListener("onmessage", this.handleMessage);
  }
  componentWillUnmount() {
    window.removeEventListener('onmessage', this.handleMessage);
  }
  handleMessage(e){
    console.log('me?')
  }
}

I send the message like this:

window.opener.postMessage('a message', '*');

I know the message is getting to the window, because I can successfully listen to it in the plain JS file that loads the react app. However listening for it in react as above does not work.

Why isn't my listener every being triggered, how can I debug it?

reactjs javascript
1 Answers

The event's name should be message and not onmessage:

 window.addEventListener("message", this.handleMessage);

See: The dispatched event

user_143498080
Related