在 React 组件中收听 window.onmessage

Question

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?

Answer 1

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

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

See: The dispatched event