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

Question

我们的React网站有几个组件/页面，它们基本上是CRUD处理的：从用户那里收集几个字段，并在Submit上将这些字段存储为数据库记录。今天的问题是，用户可以填写几个字段，将这些值存储在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一起使用。这些都会导致这样的事情吗？

Answer 1

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