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

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