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

问题描述

问 题

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

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

解决方案

别用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)}/>
    ...
  }
}

这篇关于react.js - React 项目步骤操作，应采取什么样的方式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！