时间戳

首页 > 解决方案 > ReactJS：调整窗口大小时如何阻止屏幕刷新状态？

reactjs - ReactJS：调整窗口大小时如何阻止屏幕刷新状态？

问题描述

我们的 React 站点有几个基本上是 CRUD 处理的组件/页面：从用户那里收集几个字段，并在提交时将这些字段存储为数据库记录。今天的问题是用户可以填写几个字段，将这些值存储在 State 中，然后如果他们出于任何原因调整屏幕大小，则会丢失所有内容。显然，“调整大小”自动包括“刷新”。

我们希望新的 CSS 生效（例如，移动与桌面的媒体查询）。但是我们不希望我们在 State 中的所有值都被清除，并且屏幕重置到开头。

有没有可能得到我们想要的？

一个典型的领域是

  <TextInput
             className={"required"}
             id="firstName"
             name="firstName"
             value={this.state.firstName}
             onChange={this.handleChange}
             placeholder="First Name"
             labelText="First Name"
             invalid={this.state.firstNameInvalid}
             invalidText="First Name is required"

将输入值放入 State 的 handleChange 是：

handleChange(event) {
        const {name, value} = event.target
        this.setState({[name]: value})
    }

State 中的值可以正常工作，直到以任何方式更改窗口大小：最大化/最小化/拖动，将移动设备从垂直变为水平等。在这种情况下，它的行为就像您手动刷新浏览器一样：全部状态回到初始值。

我们正在考虑的一个线索是我们正在使用 react-sidenav 库和 react-router。这些中的任何一个都会导致这样的事情吗？

标签： reactjsresizestatepage-refresh

解决方案

仅供参考，我们找到了罪魁祸首。在我们包装的 nav.js 中，使用 react-sidenav，有一个 on-resize 处理程序将大小设置为状态。通过设置 State，sidenav 重新渲染。当重新渲染时，嵌套在其中的 react-router 也会重新渲染，本质上会导致页面刷新。

推荐阅读