javascript - React 多步表单提交和验证

Question

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

假设数据模型看起来像这样 {字段:[{textbox1:texbox1value}，{datepicker1:datepicker1value}]

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

ContainerPage.ts

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

组件1.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:这里我们得到了验证状态的回调，我们可以打印错误消息或禁用按钮