ReactJS：如何在 window 调整大小时停止屏幕刷新状态？

Question

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

我们希望新的 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 中的值工作正常，直到 window 尺寸以任何方式改变：maximize/minimize/drag，将移动设备从垂直变为水平等。在这种情况下，它的行为就像您进行了手动浏览器刷新：所有状态都返回到初始值。

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

Answer 1

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

ReactJS：如何在 window 调整大小时停止屏幕刷新状态？

ReactJS: How to stop screen from refreshing State when window is resized?

state

resize

page-refresh

reactjs