Reactjs 屏幕更改方向侦听器

我正在尝试为我正在使用的React应用程序的纵向和横向版本创建一个不同的按钮位置。我试着了解事件监听器，并参考了这些监听器，在谷歌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>
    );
  }
}

import React，{Component}来自“React”；
从“react router dom”导入{Link}；
导入“./style/App.css”；
从“@material ui/core”导入{排版、按钮、卡片、网格}；
从“./images/homepage2.png”导入homepage2；
导出默认类WelcomeComponent扩展组件{
onOrientationChange=（事件）=>{
console.log（'changed orientation'）；
}
render（）{
返回(
继续
);
}
}

让我知道它是否适用于您沙盒工作正常，但我不知道如何将其适应我的代码正如codesandbox中提到的，您可以采用相同的方式适应并实现onOrientationChange，基本上是在组件上。您需要添加该组件。如果您需要进一步澄清，请告诉我。所以在那之后，我将用示例代码作为答案进行更新