React 多步骤表单提交和验证答案

【问题标题】：React Multi Step Form Submit and ValidationReact 多步骤表单提交和验证
【发布时间】：2020-01-20 01:02:31
【问题描述】：

所以我在母版页中有一个表单，它将在其中呈现不同的文本框、单选框或日期选择器等。每次单击下一个按钮和后退按钮时，它都会转到下一个组件或上一个组件，并保存整个表单。

假设数据模型如下所示 {字段：[{textbox1：texbox1value}，{datepicker1：datepicker1value}]

给定一个或多或少像这样的伪代码。

ContainerPage.ts

<form>
   renderComponent(listOfComponent) // this will switch based on the link
   <button back>
   <button next>
</form>

Component1.ts

<input textbox>

Component2.ts

<input datepicker>

我能够保存它，但想知道如果按钮位于父组件上，您如何验证输入？

我或多或少都在关注这个网站，但它没有经过验证 https://css-tricks.com/the-magic-of-react-based-multi-step-forms/

我还看到一些网站以这样的方式开发它，表单位于每个组件上，而不是母版页上。但最终使用了 1 个表单。

【问题讨论】：

【解决方案1】：

有一些方法可以解决这个问题。我最喜欢的方法是向表单组件添加一个回调函数，当表单的验证更改时将调用该回调函数。因此，您永远不需要从组件外部检查表单的验证，并且在您需要该表单的任何地方都可以获得验证状态。

这里我们有两个组件 App 和 Form Form: 在这里我们处理所有的字段和验证 App：这里我们得到了验证状态的回调，我们可以打印错误消息或禁用按钮

【讨论】：