React 项目步骤操作，应采取什么样的方式

Question

做了好多页面，今天发现做错了，是一个步骤操作页面，需要后退保留表单数据，而我之前的做法是每一个步骤都做了一个组件导出到路由里了，这造成了重新加载组件。

可能我一开始的方式就是错误的，这次要改的话，我现在的想法是通过一个高阶组件去加载每步的组件，然后每次下一步去验证表单格式，正确就利用css给他隐藏起来，打开下一个步骤，我说一下我为什么要用css，如果点击上一步再次加载那一步的组件的话，那个容器里还是只保留的只是那一步，别的步骤都被替换掉了，所以这方法不可行，只能用css去hide，请问大家有做过的吗？有没有更好的方式？另外有没有快速处理表单的插件？ 大致要求就是返回上一步可以保留表单数据，然后到最后一步的时候，点保存提交表单数据.

Answer 1

别用route，在一个组件内维护状态即可，比如：

callback: function(step, stepData) {
  const newState = {...this.state}
  newState.stepDate[step] = stepData
  return newState
}

render: function() {
  switch (this.state.currentStep) {
    case 1: return <Cluster_1 callback={callback.bind(this, 1)}/>
    case 2: return <Cluster_2 callback={callback.bind(this, 2)}/>
    case 3: return <Cluster_3 callback={callback.bind(this, 3)}/>
    ...
  }
}

Answer 2

首先要声明一点达成共识，就是未保存到数据库的数据，浏览器刷新后会丢失。
也就是说，我们将数据和状态都保存在内存中，会话内。

然后，就算你现在是路由也没关系，不需要重构业务。

只要把需要存储的数据做“公共耦合”。具体做法把这些数据存储在一个Store里，每次发生更改和读取都操作这个Store，即便路由变化，不管哪个页面都可以访问和修改这个数据。前提是浏览器不刷新。

Answer 3

谢邀~

看到这个需求, 首先想到的方法答题逻辑和楼上rock差不多.
对待react还是需要思想上的转变.

Answer 4

你这一个小页面用react-router是有些浪费的，这个最好用做跳转页面，会很好用，并且可以通过路由传参数，那么可以做的事情就很多了，例如通过传来的参数去请求数据，再次渲染页面等等

你的这个问题，可以用dispatch redux的方法，当你点击下一步的时候，把这一页的数据，发送到redux树（store），每次进来的时候都链接一下，这样无论你怎么切换都会显示的最新的数据，
所有的都填写完了，全部提交的时候只需要把store的树里面的五个object做一下字符串的处理，按照后台的格式进行更改，然后提交就可以了。最好用react－redux这个相对简单点，给你个链接可以去看看
http://www.ruanyifeng.com/blo...
可以参考学习，希望对你有帮助