單擊時驗證最終表單數組

Question

我正在使用 React Final Form 構建一個應用程序。 在表單中，用戶需要填寫基本輸入字段並添加問題及其選擇。 對於問題和選擇，我使用FieldArray功能。 所以，直到這里一切都很好並且工作正常。 但是，我想向此表單添加另一個功能。

如下圖所示，這是在FieldArray呈現的 Card 組件。 每次用戶點擊添加問題按鈕，頁面上都會出現另一個卡片組件。

我需要的功能是使Save按鈕在右上角工作。 目前我不知道應該如何實現 Save 按鈕，但我想要實現的是我想將圖像中的 Card 組件切換到另一個 Card 組件，在那里我使用fields.value顯示輸入數據。 所以，沒有輸入字段。 但是，我還想在單擊保存時驗證表單的這一部分。 這是我不知道該怎么做。 因此，每個 Save 按鈕都會驗證自己的字段，如果驗證通過，則 Card 將切換到另一個數據為只讀的 Card 組件。

因此，我需要您對驗證部分的建議以及您添加此功能的意見。

謝謝

編輯

我一直在閱讀 FinalForm 和 ReduxForm 的文檔以弄清楚如何處理這種情況，但我還沒有弄清楚。

我已經檢查了 FinalForm 文檔中的向導示例。 但是我不確定它是否適合我的情況。 向導在頁面上始終存在一個<form>標記，當用戶單擊下一步按鈕時，輸入字段會切換。 就我而言，我可能需要您提到的多個表單標簽。

我以 3 個表單結構為例。 你能告訴我該走哪條路嗎？

import { Form as FinalForm } from 'react-final-form'

#1 基本形式：

結構形式的經典方式，這是目前的情況。 所以，這不是解決問題的方法。

      <FinalForm onSubmit={aCustomSubmitFunction}>
        {
          ({ handleSubmit }) => {
            return (
              <form onSubmit={handleSubmit}>
                <Field name='firstName'>{({input}) => <input {...input} />}</Field>
                <Field name='lastName'>{({input}) => <input {...input} />}</Field>
                <FieldArray name='questions'>
                  {({ fields }) => (
                    <div>
                      {fields.map((name, index) => {
                        return (
                          <div className="card">
                            <Field name={`${name}.question`}>{({input}) => <input {...input} type="text" />}</Field>
                            <button type="button" onClick={() => fields.remove(index)}>Delete</button>
                            <button type="submit">Save</button>
                          </div>
                        )
                      })}
                      <button type="button" onClick={() => fields.push({ question: undefined })}>Add a Question</button>
                    </div>
                  )}
                </FieldArray>
                <button type="submit">Submit</button>
              </form>
            )
          }
        }
      </FinalForm>

#2 單個 FinalForm 下的多個表單：

FinalForm 中的多個表單。 這似乎是要走的路，但是“保存”按鈕提交的是整個表單而不是它自己的表單。 它使用相同的handleSubmit所以這一定是原因，但我怎么能有不同的 handleSubmit？ 用另一個FinalForm包裝 FieldArray 內的表單標簽？

      <FinalForm onSubmit={aCustomSubmitFunction}>
        {
          ({ handleSubmit }) => {
            return (
              <>
                <form onSubmit={handleSubmit}>
                  <Field name='firstName'>{({input}) => <input {...input} />}</Field>
                  <Field name='lastName'>{({input}) => <input {...input} />}</Field>
                  <button type="submit">Submit</button>
                </form>
                <FieldArray name='questions'>
                  {({ fields }) => (
                    <div>
                      {fields.map((name, index) => {
                        return (
                          <form onSubmit={handleSubmit}>
                            <div className="card">
                              <Field name={`${name}.question`}>{({input}) => <input {...input} type="text" />}</Field>
                              <button type="button" onClick={() => fields.remove(index)}>Delete</button>
                              <button type="submit">Save</button>
                            </div>
                          </form>
                        )
                      })}
                      <button type="button" onClick={() => fields.push({ question: undefined })}>Add a Question</button>
                    </div>
                  )}
                </FieldArray>
              </>
            )
          }
        }
      </FinalForm>

#3 單個 FinalForm 下的多個嵌套表單：

這是無效的 html。 所以這一定是錯誤的方法，但在我進行研究時，我發現了一個叫做 React Portals 的東西，它可能會有所幫助，但我認為這是不必要的。

      <FinalForm onSubmit={aCustomSubmitFunction}>
        {
          ({ handleSubmit }) => {
            return (
              <form onSubmit={handleSubmit}>
                <Field name='firstName'>{({input}) => <input {...input} />}</Field>
                <Field name='lastName'>{({input}) => <input {...input} />}</Field>
                <FieldArray name='questions'>
                  {({ fields }) => (
                    <div>
                      {fields.map((name, index) => {
                        return (
                          <form>
                            <div className="card">
                              <Field name={`${name}.question`}>{({input}) => <input {...input} type="text" />}</Field>
                              <button type="button" onClick={() => fields.remove(index)}>Delete</button>
                              <button type="submit">Save</button>
                            </div>
                          </form>
                        )
                      })}
                      <button type="button" onClick={() => fields.push({ question: undefined })}>Add a Question</button>
                    </div>
                  )}
                </FieldArray>
                <button type="submit">Submit</button>
              </form>
            )
          }
        }
      </FinalForm>

Answer 1

要僅驗證表單的一部分，您必須將其拆分為多個表單，並使用“保存”按鈕“提交”表單。 向導示例執行此操作，從父組件中的每個“頁面”收集表單值。

希望這可以幫助...