屏幕更改方向监听器ReactJS

Question

我正在为正在使用的React应用程序的纵向和横向版本设置不同的按钮位置。我尝试了解事件监听器，并参考了这些two posts，并尝试在控制台上使用Google Chrome浏览器的iPhoneX视图进行旋转时检查了控制台是否有消息。但是，我似乎没有看到“方向改变”的消息。有人知道我的代码有问题吗？随时要求进一步澄清。

Welcome.js

import React, { Component} from "react";
import { Link } from "react-router-dom";
import "../style/App.css";
import { Typography, Button, Card, Grid } from "@material-ui/core";
import homepage2 from "../images/homepage2.png";


export default class WelcomeComponent extends Component {

  onOrientationChange = (event) => {
    console.log('changed orientation');
  }

  render() {
    return (
      <div onOrientationChange={this.onOrientationChange}
        style={{
          minHeight: "100vh",
          backgroundImage: `url(${homepage2})`,
          backgroundPosition: "center",
          backgroundSize: "cover"
        }}
      >
        <div
          style={{
            textAlign: "center",
            verticalAlign: "bottom",
            bottom: "0px"
          }}
        >
          <Link to="/Language">
            <Button
              variant="contained"
              color="secondary"
              size="large"
              style={{
                position: "absolute",
                top: "50%",
                left: "50%",
                transform: "translate(-50%,-50%)"
              }}
            >
              CONTINUE
            </Button>
          </Link>
        </div>
      </div>
    );
  }
}