我正在使用 React Final Form 构建应用程序。在表单中，用户需要填写基本输入字段并添加问题及其选项。对于我正在使用FieldArray功能的问题和选择。所以，直到这里一切都很好并且工作正常。但是，我想在此表单中添加另一个功能。
正如您在下图中看到的，这是一个在内部渲染的 Card 组件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？用另一个包裹 FieldArray 内的表单标签FinalForm？
<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>