使用 React 和 Django Rest Framework 的多步骤表单处理

问题描述

我有一个三步表单来在数据库添加一个故事

enter image description here

用户填写第一步表单时,所有第一步数据都将添加到故事表中,用户将被重定向到第二步。我为第一步、二、三写了三个视图。

我的问题是我应该如何管理第二步视图和第三步视图?我应该如何更新第二步和第三步的故事?我应该将 id 发送回前端并将其存储在 redux 中吗?然后将该 id 发送到后端进行第二步和第三步?

另外我应该如何重用这个表单来响应更新?

如果需要,我可以提供更多详细信息

解决方法

我相信没有“适合所有人”的解决方案,但总的来说您的想法是正确的。如果有后端知道而您的前端不知道的数据,则将其作为响应发送回去。所以这将是这样的:

  1. 将表单发送到后端
  2. 带有“OK”的后端响应加上前端需要了解的数据,或者在出现问题时出现错误
  3. 继续下一步并执行 1 直到完成

您也可以将所有三个步骤的所有数据存储在前端,然后将其一次性发送 - 在这种情况下,您不会在数据库中得到部分填充的数据,但是您将不得不考虑导航如果出现问题并且会使事情复杂化。

关于组件重用我有意见:如果你能保持组件的可维护性和可替换性 - 重用它。

编辑:如果您使用的是 react,您可能不需要通过后端重定向用户,而只需要通过 react 切换步骤(使用客户端路由器或状态中的纯“步骤”值),具体取决于您的需要。

相关问答

Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其...
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。...
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbc...