React 多步驟表單提交和驗證

Question

因此，我在母版頁中有一個表單，它將在其中呈現不同的文本框、單選框或日期選擇器等。在每次單擊下一個按鈕和后退按鈕時，它將 go 到下一個組件或上一個組件，並且保存整個表格。

假裝數據 model 看起來像這樣 {field: [{textbox1: texbox1value}, {datepicker1: datepicker1value}]

給定一個或多或少像這樣的偽代碼。

容器頁面.ts

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

組件1.ts

<input textbox>

組件2.ts

<input datepicker>

我能夠讓它保存，但想知道如果按鈕在父組件上，你如何驗證輸入？

我或多或少關注這個網站，但它沒有驗證https://css-tricks.com/the-magic-of-react-based-multi-step-forms/

我還看到一些網站以這樣的方式開發它，表單位於每個組件而不是母版頁上。 但最終使用了 1 個表格。

Answer 1

有一些方法可以處理。 我最喜歡的方法是向表單組件添加一個回調 function，當表單驗證更改時將調用該回調。 因此，您永遠不需要從組件外部檢查表單的驗證，並且在您需要該表單的任何地方，您都獲得了驗證 state。

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

這里我們有兩個組件App和Form Form ：這里我們處理所有字段和驗證App ：這里我們得到了驗證 state 的回調，我們能夠打印錯誤消息或禁用按鈕