取消组件卸载？

我有一个多步向导窗体，如果发生验证错误，我不应该能够进入下一步。取消组件卸载？

问题是，我总是可以使用浏览器的“返回”按钮转到上一步（已通过验证的步骤），将输入更改为一些无效数据，然后使用浏览器前进按钮返回当前步骤这意味着我已经“绕过”验证。

我不知道如果我可以离开当前步骤之前，做一次检查，防止留下如果出了问题，我想实现像

class Step2 extends Reac.Component { 
// ... 
compomentWillUnmount(){ 
    if(!form.isAllFieldsValid()){ 
     // display error and abort forward action 
    } 
} 
// ... 
}

图示例：

正常流量将是1,2,3,4 ......等等。

我想处理的流程是，1，2，3，然后在步骤2的屏幕，用户按浏览器后退按钮，就第一步一些无效的变化，然后按浏览器前进按钮。我试图查看是否有可能钩住“前进”事件，进行验证，并决定是否应该保留第1步的错误消息或继续前进到第2步。

棘手的部分是由需求，表单数据需要始终保存（在浏览器内存中），当你离开的每一步，所以你可以恢复他们回来

来源

2017-02-07 Kossel

所以基本上你需要一个条件来确定路线变化是否应该通过或不通过？如果是这样，看看我以前的答案[这里]（http://stackoverflow.com/a/37192984/2030321）。该问题的OP需要确认对话，但您可以用错误消息替换“是/否”确认。 – Chris

对不起，我添加了一个图，希望我能更清楚一点 – Kossel

这真的取决于其中数据去一旦其有效吗？我会说，在那之前它实际上被发送，就在那之前做最后的验证。

举例来说，如果你有一个最终的“提交”或“保存”按钮的步骤结束后，你可能有一个onSave有可能是爱可信（或其他异步调用）：

async onSave() { 
    // ~~ insert validation around here ~~ // 
    const response = axios.post('foo/save', this.state.data); 
    this.setState({ 
     complete: true, 
    }); 
}

这不是真正的卸载任务。卸载更有意清理在安装（或其他地方）时所做的任何不反应的事情。

来源

2017-02-07 05:16:17 Chris

从收集到的数据只会在最后一步提交。因为我们有一个步进器来指出哪一步出错了，所以我需要在向导的每个页面上进行验证。我有应用程序返回/以前的工作非常好，唯一的唯一的是浏览器后退/前进按钮：s – Kossel

所以要澄清，他们回去时发生了什么/应该/什么？他们是否应该转到步进器前面的页面？上一步应该锁定？ – Chris

回到上一步。问题更多的是前瞻性的，我想做一些事情，然后决定是否应该去下一条路线 – Kossel

取消组件卸载？

回答

相关问题