Question

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

import React from "react";

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

export default Home;

如何防止刷新值。

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

Answer 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

Answer 2

将React应用程序与Redux集成在一起。

Redux是JavaScript应用程序的可预测状态容器。 Redux使管理应用程序状态变得容易

安装相关的npm软件包，并遵循此link

Answer 3

Here是我的解决方案，使用HOC和localStorage API保留数据。

不要在组件更改时刷新输入值

3 个答案:

编辑