Я создаю приложение с помощью React Final Form. В форме пользователь должен заполнить основные поля ввода c, а также добавить вопросы с его выбором. Для вопросов и ответов я использую функцию FieldArray. Итак, пока здесь все хорошо и работает. Однако я хотел бы добавить еще одну функциональность к этой форме.
Как вы можете видеть на рисунке ниже, это компонент Card, отображаемый внутри FieldArray. Каждый раз, когда пользователь нажимает кнопку Добавить вопрос , на странице появится еще один компонент карты.
Мне нужна функция, чтобы кнопка Save работала в правом верхнем углу. В настоящий момент я не знаю, как мне реализовать кнопку Сохранить, но я хочу, чтобы я переключил компонент Card на изображении на другой компонент Card, где я отображаю входные данные, используя fields.value. Таким образом, нет поля ввода. Тем не менее, я хочу также проверить эту часть формы, когда я нажимаю сохранить. Это то, что я не знаю, как это сделать. Таким образом, каждая кнопка «Сохранить» будет проверять свои собственные поля, и, если проверка пройдет успешно, Карта будет переключена на другой компонент Карты, где данные доступны только для чтения.
Итак, мне нужно ваше предложение и для части проверки По вашему мнению, чтобы добавить эту функцию.
Спасибо
Редактировать
I Я читал документы FinalForm, а также ReduxForm, чтобы понять, как мне справиться с этой ситуацией, но я пока не мог понять.
Я проверил пример мастера в документах FinalForm. Однако я не уверен, подходит ли это для моей ситуации. В мастере всегда присутствует один тег <form> на странице, и когда пользователь нажимает следующую кнопку, переключаются поля ввода. В моем случае мне могут понадобиться несколько тегов форм, как вы упомянули.
В качестве примера я поместил 3 структуры форм. Можете ли вы сказать мне, какой путь к go?
import { Form as FinalForm } from 'react-final-form'
# 1 Basi c Форма:
Classi c способ структурирования формы и это текущая ситуация. Таким образом, это не способ решить проблему.
<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. Это похоже на способ go, однако кнопка «сохранить» передает всю форму, а не свою собственную форму. Он использует тот же 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>