反应多步骤表单提交和验证

Question

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

假装数据模型如下所示 {field：[{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种形式。

Answer 1

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

看那个例子 https://codesandbox.io/s/charming-glitter-10db0

这里我们有两个组成部分App和Form Form：这里我们处理所有字段和验证 App：在这里，我们获得了验证状态的回调，并且能够打印错误消息或禁用按钮