在 React 中的视图之间切换时保留输入值

Question

情况：我有几个输入组件，但根据路由（react-router）显示不同的组件。

问题：我希望在路由和 dropping/re-adding 输入组件之间来回切换时保留用户已经输入的输入值。

到目前为止，我提出了两个解决方案：1) 始终渲染所有内容，但如果不显示则通过 CSS 隐藏（以某种方式打破了 React 的想法） 2) 在 flux 架构中实现某种 "input value store"（非常详细）

还有其他想法吗？我是否遗漏了更基本的东西？

Answer 1

查看动态细分

If you have dynamic segments in your URL, a transition from /users/123 to /users/456 does not call getInitialState, componentWillMount, componentWillUnmount or componentDidMount. React-Router-Guide

您应该像这个例子一样使用动态路由：

<Route name="inbox" handler={Inbox}>
  <Route name="message" path=":messageId" handler={Message}/>
  <DefaultRoute handler={InboxStats}/>
</Route>

如果您更改 messageId（子组件），您在收件箱（父）组件中的状态仍然相同。

它将看起来像这样：

<Route name="search" path="/search/:query?/:limit?/:offset?" handler={Search} />

Answer 2

我肯定会选择第二种方法，比如 Flux。但如果这是您的应用程序中唯一需要它的东西，您可以保持非常简单。应该可以用很少的代码行来实现。

您获得的好处是 Flux 方法的扩展性非常好，因此您不必在应用程序增长时重写它。

在 React 中的视图之间切换时保留输入值

Preserve Input Values when switching between views in React

javascript

forms

reactjs

react-router