使用SessionStorage反应多步表单

我对React很陌生，并且有多步骤轮廓创建表单。我已经在寻找sessionStorage的最佳用例，但似乎没有人对这种或那种方式充满激情。目前，我有形式为主要成分：使用SessionStorage反应多步表单

render() { 
switch (this.state.step) { 
    case 2: 
    return <Step nextStep={this.nextStep} prevStep={this.prevStep} /. 
    case 3: 
    return <Step nextStep={this.nextStep} prevStep={this.prevStep} /> 
    case 4: 
    return <Step nextStep={this.nextStep} prevStep={this.prevStep} /> 
    case 5: 
    return <Step nextStep={this.nextStep} prevStep={this.prevStep} /> 
    default: 
    return <Step nextStep={this.nextStep} /> 
} 
}

每个步骤都有多个输入字段，我想知道，如果它是不好的做法，在sessionStorage的这些值存储在他们的组件（或localStorage的），而不是状态或者一个redux存储并在收集完所有字段后将它们发送到后端。

来源

2017-02-02 mikeg542

这取决于。我会说你需要一个非常具体的理由将它保存在会话或本地存储中。原因可能是，即使用户刷新页面，也需要表单字段才能保留。

您仍然可以将Redux与本地存储一起使用。您只需使用本地存储，初始化Redux状态，然后使用Redux操作更新本地存储。

因此，如果您从Redux开始，那么您可以稍后添加会话本地存储空间，如果您决定确实需要输入在会话之间持续存在。

来源

2017-02-02 15:38:41

这将是很好的持久刷新（虽然不需要）。这主要是通过sessionStore来完成，在这种情况下，解决方案要快得多（只需在每次点击下一个按钮时将值添加到sessionStorage中），但是如果这会引入漏洞/错误代码，那么我会使用更长的解决方案来使用一个还原商店。 – mikeg542

从长远来看，我认为它不会更快。使用Redux或类似的东西是一种（可以说）更有结构化和确定性的管理应用程序状态的方式。它仍然允许您用例如本地存储等，稍后如果你发现你真的需要它。如果你只想快速和肮脏，根本没有理由使用session-localStorage。你可以简单地将你的状态保存在一个全局对象中。 –

所以一般的答案是，这不是一件坏事，但绝对值得花时间从一开始就以正确的方式做到这一点。知道了谢谢！ – mikeg542

让我们来谈谈订单流程，因为这正是我目前在项目中所做的。订单流程由多种形式的步骤组成。

整个顺序状态存储在某处（在父组件，还原存储，本地存储或这些组合中的状态）。
每一步/表单本身只更新订单状态的相关部分 - 表单感兴趣的部分。
对表单提交，有机制验证表单并允许或不允许转换到下一步（更多内容）

使用有限状态机管理从步骤A到B（或B到C或任何其他）的转换。它保存当前的Order状态（它告诉应该呈现什么样的形式），步骤的定义和跨步的状态转换。

在转换尝试时，如果已注册，则会调用挂钩。挂钩信号的结果是状态机是否允许转换并更新Order 状态。挂钩可以同步，或异步以及...

那么，这是理论。

有限状态机我选择的https://github.com/jakesgordon/javascript-state-machine/tree/v3

实现捆绑项目。

来源

2017-02-02 15:36:34 Andreyco

使用SessionStorage反应多步表单

回答

相关问题