reactjs – 如何在React中检测屏幕大小是否已更改为移动设备？

发布时间：2020-12-15 20:47:05 所属栏目：百科来源：网络整理

导读：我正在使用React开发一个Web应用程序,需要检测屏幕大小何时进入移动断点才能更改状态.具体来说,当用户进入移动模式并且使用存储在组件内状态的布尔值控制时,我需要将sidenav折叠. 我所做的是在组件安装后添加一个事件监听器： componentDidMount() { window.

我正在使用React开发一个Web应用程序,需要检测屏幕大小何时进入移动断点才能更改状态.具体来说,当用户进入移动模式并且使用存储在组件内状态的布尔值控制时,我需要将sidenav折叠.

我所做的是在组件安装后添加一个事件监听器：

componentDidMount() {
    window.addEventListener("resize",this.resize.bind(this));
    this.resize();
}

resize() {
    this.setState({hideNav: window.innerWidth <= 760});
}

编辑：
为了保存状态更新,我稍微更改了“调整大小”,只是在需要时进行更新.

resize() {
    let currentHideNav = (window.innerWidth <= 760);
    if (currentHideNav !== this.state.hideNav) {
        this.setState({hideNav: hideNcurrentHideNav});
    }
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!