問題タブ [react-final-form]

入力フィールドをクリックすると日付ピッカー コンポーネントが開き、日付範囲を選択するように、日付範囲フィールドを作成したいと考えています。入力フィールドに選択した範囲を入力したいと思います。

私がこれまでに行ったこと：

Fieldコンポーネントによってラップされる入力フィールドを作成しました。入力の値には、this.state.DateRange に設定しました。DatePicker コンポーネントから選択された日付範囲に基づいて変更します。

私がやりたいこと：

このメソッドを使用して入力フィールドの値を設定できますが、送信を押してもその値を取得できません。値が入力に設定されているにもかかわらず、フォーム onSubmit(values) に渡されていないようです

フォームを検証するために反応最終フォームを使用していますが、正常に動作しています。入力フィールドの状態を設定するために変更ハンドラーを呼び出していますが、状態を設定していないようです.どうすれば反応する最終フォームでそれを達成できますか.

onchange ハンドラーを props として渡そうとしましInputTypeたが、最終フォームの検証に反応して意図したとおりに機能しません

私は反応最終フォームでフォームを作成しています。このフォームには、ユーザーがチェックボックスをクリックしたときにのみ表示される条件付きフィールドがいくつかあります。チェックボックスがチェックされている場合、コンポーネントがレンダリングされます。

これは、ドキュメントで提供されている例と非常によく似ています。ここで確認できます。https://codesandbox.io/s/kx8qv67nk5

私はその例に基づいており、例とまったく同じように、push メソッドを呼び出すボタンを使用してフィールド配列に追加できます。

私がやりたいことは、そのオブジェクトを配列にプッシュするためにボタンを押す必要はありませんが、配列のデフォルトにはすでに1つのオブジェクトが含まれています。

言い換えると、

提供されている例では、配列は空で始まり、配列内に定義されているフィールドに push() します。

手動でプッシュするのではなく、デフォルトで1つのオブジェクトをデフォルトで持つようにするにはどうすればよいですか?

その配列がどこで定義または初期化されているのかわかりません。

final-form-arrays を使用するフォームがあります。フォームは機能し、検証は機能しますが、コンポーネント内で状態を変更すると、すべての値がリセットされます。

react-final-form-arrays が提供するのと同じ例で問題を再現できました。

https://codesandbox.io/embed/react-final-form-field-arrays-om6p6

状態変更を切り替えるボタンを追加しました。基本的に、フォームに値を入力してから、状態を変更してみてください。フォームがリセットされますが、その理由がわかりません。initialValues を削除すると、これは起こりません。

その理由を知っている人はいますか？

反応最終フォームのドキュメントはこちらをご覧ください

私は明らかに最終的なフォームに反応するフォームに取り組んでいます。フォーム コンポーネントでは、API サーバーからデータをフェッチしており、応答本文には次のような内容が含まれています。

ご覧のとおり、 には 4 つの異なるキーと値のペアがありconfigsます。反応最終フォームは and のような値を表示できますnameが、キーにドット -> があるため、andvalueのような値は表示できません。display.nameread.only.

これらのドット ( .) をアンダースコアのようなものに変更でき、それが機能することはわかっています。しかし問題は、バックエンドの開発者が、.キー名を区切るためにドット ( ) を使用することはバックエンドでは非常に一般的であるため、ドットを他の区切り記号に置き換えることはできないと言っていることです。

現在、フロントエンドでこれらのセパレーターをアンダースコアに置き換えていますが、そのロジックはいたるところにあり、これを解決するためのより良い方法があるはずです。ありがとう！