問題タブ [final-form]

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 基本フォーム:

フォームを構成する古典的な方法であり、それが現在の状況です。したがって、これは問題を解決する方法ではありません。

#2 単一の FinalForm の下にある複数のフォーム:

FinalForm 内の複数のフォーム。これは進むべき道のようですが、「保存」ボタンは独自のフォームではなくフォーム全体を送信します。同じものを使用しているhandleSubmitので、これが理由であるに違いありませんが、どうすれば別の handleSubmit を持つことができますか? FieldArray 内にある form タグを別のタグでラップしていFinalFormますか?

#3 単一の FinalForm の下に複数のネストされたフォーム:

これは無効な html です。したがって、これは間違ったアプローチに違いありませんが、調査中にReact Portalsというものを見つけました。これは役立つかもしれませんが、不要だと思います.