不要刷新组件更改时的输入值答案

【问题标题】：Don't refresh the input values on component change不要刷新组件更改时的输入值
【发布时间】：2023-03-15 15:25:02
【问题描述】：

当我输入输入字段并切换到另一个组件时，之前输入的值会被刷新。

import React from "react";

const Home = () => (
  <div>
    <h2>Home</h2>
    <input type="text" />
  </div>
);

export default Home;

如何防止值被刷新。

演示： https://codesandbox.io/s/jv7mk6596v

【问题讨论】：

使用stores、storage、db
@Alexis 如何通过商店实现这一点。能给我一个例子吗
使用受控组件，即添加 value 和 onChange 道具到输入。将值存储在组件之外，例如与还原
@MariaJeysinghAnbu 了解 Redux。我没有时间为您编写代码，您最好自己尝试一下。 redux.js.org/introduction/getting-started

标签： reactjs react-router antd

【解决方案1】：

这里有一个uncontrolled component（<input>）。输入的值只存储在 DOM 中，当它被卸载时，该值就消失了。

为了使值保持不变，我们需要将其设为controlled component，并将输入的值保持在适当的水平。如果您希望它比Home 组件的实例持续更长的时间（并且假设您只有一个Home 组件），您可以将输入值保留在Home 的父组件中。例如：

import React from "react";

const Home = (props) => (
  <div>
    <h2>Home</h2>
    <input
      type="text"
      value={props.value}
      onChange={event => props.onChange(event.target.value)}
    />
  </div>
);

class App extends React.Component {
  state = {
    home: {
      value: ""
    }
  }
  render() {
    return (
      <div>
        <Home
          value={this.state.home.value}
          onChange={value => this.setState({ home: { value } })}
        />
      </div>
    )
  }
}

请注意，即使您停止渲染 Home 组件并将其替换为新组件，这也允许值保持不变，这正是因为状态未存储在 Home 组件本身中。

此外，作为将状态保存在组件中的替代方法，您还可以使用存储（使用例如Redux 创建），但原理是相同的：如果您希望值比组件实例持续更长时间，那么您必须将其保存在组件实例之外 - 以及组件实例呈现的元素之外，就像您所做的那样。但是，将状态保存在存储中还是保存在更长寿的组件中更多的是实现细节。

编辑

我查看了您的代码示例，在您的情况下，使用商店可能会更干净。但是，我将向您展示如何使用组件状态来解决它的示例。这是您的项目进行了必要的更改：https://codesandbox.io/s/6vqz30jjon

【讨论】：

【解决方案2】：

将 react 应用与 redux 集成。

Redux 是 JavaScript 应用程序的可预测状态容器。 Redux 让您轻松管理应用程序的状态

安装相关的npm包并关注这个link

【讨论】：

【解决方案3】：

Here 是我的解决方案，使用 HOC 和 localStorage API 来持久化您的数据。

【讨论】：