单击时验证最终表单数组

Question

我正在使用 React Final Form 构建应用程序。在表单中，用户需要填写基本输入字段并添加问题及其选项。对于我使用FieldArray 功能的问题和选择。所以，直到这里一切都很好并且工作正常。不过，我想为这个表单添加另一个功能。

如下图所示，这是在FieldArray 内渲染的卡片组件。每次用户点击添加问题按钮，页面上都会出现另一个卡片组件。

我需要的功能是使Save 按钮在右上角起作用。目前我不知道应该如何实现 Save 按钮，但我想要实现的是我想将图像中的 Card 组件切换到另一个 Card 组件，在那里我使用fields.value 显示输入数据。所以，没有输入字段。但是，我还想在单击保存时验证表单的这一部分。这是我不知道该怎么做。因此，每个保存按钮都会验证自己的字段，如果验证通过，卡片将切换到另一个卡片组件，其中数据是只读的。

所以，我需要您对验证部分的建议以及添加此功能的意见。

谢谢

编辑

我一直在阅读 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

要仅验证表单的一部分，您必须将其拆分为多个表单，并使用“保存”按钮“提交”表单。 Wizard Example 执行此操作，从父组件中的每个“页面”收集表单值。

希望这会有所帮助...