使用 React 和 Django Rest 框架的多步表单处理

Posted 2023-02-16

【中文标题】使用 React 和 Django Rest 框架的多步表单处理

【英文标题】：Multi Step Form Handling using React and Django Rest Framework

【发布时间】：2021-05-29 11:26:59

【问题描述】：

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

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

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

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

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

【参考方案1】：

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

将表单发送到后端 带有“OK”的后端响应加上前端需要知道的数据，或者如果出现问题则带有错误 继续下一步，直到完成 1

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

关于组件重用我有意见：如果您可以保持组件可维护和可替换 - 重用它。

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