React Final Form でアプリケーションを構築しています。フォームでは、ユーザーは基本的な入力フィールドに入力するだけでなく、選択肢を含む質問を追加する必要があります。質問と選択肢については、FieldArray機能を使用しています。だから、ここまではすべてがうまく機能しています。ただし、このフォームに別の機能を追加したいと考えています。
下の画像でわかるように、これは 内でレンダリングされた Card コンポーネントFieldArrayです。ユーザーが [質問を追加] ボタンをクリックするたびに、ページに別のカード コンポーネントが表示されます。
私が必要とする機能は、Saveボタンを右上隅で機能させることです。現時点では、[保存] ボタンをどのように実装すればよいかわかりませんが、達成したいのは、画像内の Card コンポーネントを別の Card コンポーネントに切り替えて、 を使用して入力データを表示することfields.valueです。したがって、入力フィールドはありません。ただし、[保存] をクリックしたときに、フォームのこの部分も検証したいと考えています。これは私がどうしたらいいかわからないものです。そのため、すべての保存ボタンは独自のフィールドを検証し、検証に合格すると、カードはデータが読み取り専用の別のカード コンポーネントに切り替えられます。
そのため、この機能を追加するための検証部分に関する提案と、ご意見が必要です。
ありがとう
編集
FinalForm と ReduxForm のドキュメントを読んで、この状況をどのように処理できるかを理解しましたが、まだ理解できませんでした。
FinalForm ドキュメントでウィザードの例を確認しました。しかし、それが私の状況に適しているかどうかはわかりません。ウィザード<form>のページには常に 1 つのタグがあり、ユーザーが [次へ] ボタンをクリックすると、入力フィールドが切り替わります。私の場合、あなたが言及したように、複数のフォームタグが必要になる場合があります。
例として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 内にある form タグを別のタグでラップしてい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>