单击时验证最终表单数组

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

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

希望这可以帮助...