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

Question

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

问题：我希望在路由之间来回切换以及删除/重新添加输入组件时，保留用户已输入的输入值。

到目前为止，我想出了两个解决方案：1）总是渲染所有内容，但如果不显示则通过CSS隐藏（以某种方式打破了React的想法） 2）在flux体系结构中实现某种“输入值存储”（相当精细）

还有其他想法吗？我错过了一些更基本的东西吗？

Answer 1

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

您获得的好处是Flux方法可以很好地扩展，因此如果应用程序增长，您将不必重写它。

Answer 2

查看动态细分

  

如果您的网址中包含动态细分，则从/ users / 123到/ users / 456的转换不会调用getInitialState，componentWillMount，componentWillUnmount或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} />