0

我正在使用 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>
4

1 回答 1

0

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

希望这可以帮助...

于 2020-03-02T05:59:27.027 回答