問題タブ [redux-form]

Redux-Formを使用しており、次のシナリオがあります。

数値と日時は、フィールドへの入力が完了するまで無効12/08/になる可能性があるため、特殊です (例: )。また、同じ値を表す文字列が複数ある場合もあります (例: 2.5000and 2.5)。

そのため、フォームとアプリケーション状態の両方で、すべてのフィールドを文字列として保持することにしました。

問題は、検証後にフィールドの値を処理して、サーバーに送信される JSON が実際に文字列だけでなく数値と日時を持つようにする必要があることです。

これは理想的なソリューションですか？もしそうなら、どうすればそれを行うことができますか?

ノーマライザーを使用して、残りの API からのISO 8601 日付/時刻値 (例) を単に日付 ( 例) に変換しています。私のノーマライザーは次のようになります。2016-05-24T20:38:34+00:00 2016-05-24

また、通貨換算にノーマライザーを使用します (たとえば、数値のみであることを確認するなど)。

私が直面している問題は、これによりフォームが常に汚れていることです。つまり、初期状態が読み込まれるとすぐに ( in 経由initialValuesでmapStateToProps)this.props.dirty常に true が返されます。をディスパッチしても にはなりresetませんdirty=false。

これを克服する方法はありますか？私が抱えている問題は、onChange入力フィールドごとに独自のオーバーライドを実装することなく、変更を放棄しようとしているという警告をユーザーに表示できるようにしたいということです。現在、常に警告されています放棄された変更。

私はしばらくの間、これらすべてを行うための最良の方法を見つけようとして、車輪を回転させてきました。これが私の状況です：

ログイン/アカウント作成ページを作成するために、React Router と Redux Form を組み合わせて使用​​しています。

ホームページを読み込むと、アカウントを作成するためのフィールドが表示されます

React Form を使用してフィールドを検証し、問題がなければ実行します

したがって、ウィザードの次の最後のページにそれらをプッシュします。この 2 番目のページには、以前のフォームで提供された名前を入力したい入力が無効になっています。この2番目のページに表示されるようにユーザーが送信した名前を取得するにはどうすればよいですか?

React Form は、デコレータの使用について語っています。

http://redux-form.com/5.2.4/#/api/get-values?_k=eo04uv

https://github.com/erikras/redux-form/issues/260#issuecomment-155852315

デコレータを使用できるように環境をセットアップしましたが、同じコードを数行上に実装しようとすると、次のエラーが表示されます。

Warning.js:45Warning: 失敗した propType:に指定されたfields型の prop が無効です。配列が必要です。.warning@warning.js:45 getValues.js:59のrenderメソッドを確認objectReduxForm(Signup)Connect(ReduxForm(Signup))

と

キャッチされていない TypeError: fields.reduce は関数ではありません

スクリーンショットの元となった最初のページは、WizardFormFirstPage.js ( http://redux-form.com/5.2.4/#/examples/wizard?_k=y8mg56 ) に非常によく似ています。WizardFormSecondPage は、無効な入力で WizardFormFirstPage からのデータをどのように表示しますか?

私はそれがたくさんあることを知っています、どんな助けでも大歓迎です！また、これを別の方法で行うことに関するフィードバックは素晴らしいものであり、現在のアプローチに賛成です。

1 つのページに複数のフォームを埋め込もうとすると問題が発生します。ページに複数のフォームがある場合でも、一度実行されることに気付きconfigFormました。そのため、異なるフォーム名を動的に生成できません。

結合された複数のテキスト フィールドを示すスクリーンショット。

互いに独立して動作するようにフォームを追加するにはどうすればよいですか?

次のモデルが必要です。

フォームのユーザーが次の状態を作成できるようにしたい (それぞれに独自の意味があります)。

デフォルトでは、redux-form{}はスキーマから空のオブジェクトを削除します: https://github.com/erikras/redux-form/issues/1047#issuecomment-221925136

したがって、この動作を考えると、状態 1 と状態 2 は同じであり、おそらく状態 3 も同じです。

for prop2を追加しようとしましたFieldが、うまくいきませんでした。withとpropertiesにFieldObject似ていると思います。FieldArrayadddelete

ネストされたプロパティの親を自動作成することは redux-form のクールな機能ですが、上記のユースケースでは一致しません...

3 つのフィールドで構成されるフォームがあります。フィールド #1 の値が と等しい場合true、フィールド #3 をフォームから削除する必要があります。フィールド #1 の値が と等しい場合false、フィールド #3 をフォームに戻す必要があります。

これを行う簡単でクリーンな方法が見つかりません。

redux-form サイトの例の 1 つは、フォームのコンテナーの状態に基づいてフォームを動的に構築する方法を説明しています。コンテナはフィールド配列を としてフォーム コンポーネントに渡します。フィールド配列propを制御する入力フィールドはコンテナ内にあります。フィールド＃1はフォーム内にある必要があるため、実際にはそのアプローチを使用できません。

CSS を使用して単純にフィールド #3 を非表示にしようとしましたが、検証ルールはどのフィールドが非表示になっているかどうかを認識していません。

react reduxで簡単なブログを作っています。パッケージとして redux フォームを使用していますが、post、get、delete などのイベントを作成しましたが、編集で値のタイトルと本文を取得できないため、フォーム編集できませんでした。componentwillMount で初期化して解決しようとしましたが 、ComponentWillMountにthis.props.edit.titleを書き込むと、未定義のプロパティ 'title' を読み取ることができないというエラーが発生します

この問題を解決するにはどうすればよいですか、編集フォームで値を取得するにはどうすればよいですか

Ajax 呼び出しを行うredux-formhandleSubmit関数では、Redux 状態のいくつかのプロパティが Ajax で必要になります (ユーザー ID など)。

handleSubmitフォームのコンポーネントで定義したい場合、これは簡単です: 必要なものを渡すために呼び出し、 mymapStateToPropsから読み取るだけです。this.propshandleSubmit

ただし、優れた React-Redux 開発者のように、ビュー コンポーネントとコンテナーを別々に作成するので、ビュー コンポーネントは動作がほとんどまたはまったくないシンプルなものになります。したがって、コンテナで handleSubmitを定義したいと思います。

繰り返しますが、シンプル - redux-form はそれを行うために設定されています。onSubmitinを定義するmapDispatchToPropsと、フォームはそれを自動的に呼び出します。

ただし、待っmapDispatchToPropsてください。還元状態にアクセスする方法はありません。

わかりました、問題ありません。必要な小道具をhandleSubmitフォームの値と一緒に渡すだけです。

handleSubmitうーん、待ってください、このメカニズムを使用してデータを渡すことは不可能です! 1 つのパラメーターを取得valuesし、別のパラメーターを追加する方法はありません。

これにより、次の魅力のない代替手段が残ります (そのうちの 1 と 2 が機能することを確認できます)。

1フォーム コンポーネントで送信ハンドラーを定義し、そこから、mapDispatchToProps から渡された独自のカスタム送信ハンドラー関数を呼び出します。これは問題ありませんが、私のコンポーネントは、フォームを表示するのに必要ではない redux 状態からのいくつかの props を知る必要があります。(この問題は redux-form に固有のものではありません。)

または、より簡潔に言えば、これはすべてアロー関数に組み合わせることができます。

次に、このハンドラーを完全に不可知にするために、 this.props 全体をカスタム ハンドラーに戻すことができます。

2 mapDispatchToPropsではなく、mergeProps で onSubmit を定義して、stateProps にアクセスできるようにします。Dan Abramov は、(パフォーマンス上の理由から) mergeProps を使用しないことを推奨しているため、これは最適ではないようです。

3状態プロパティを、フォーム コンポーネントの入力コントロールにマップされていないredux-form フィールドにコピーします。valuesこれにより、に返されるパラメータでアクセスできるようになりますhandleSubmit。これは一種のハックのようです。

もっといい方法があるに違いない！

より良い方法はありますか？

私は比較的JSと反応が新しく、Redux-Formを使用して単純なアイテムをmongo dbに追加しています。私はフォームを構成し、API は db 接続で定義されていますが、解釈できる方法でデータを送信するようにアクションでコードを正しく構成しているとは思いません。

具体的には、送信を押した後にフォーム データが表示されていますが、500 エラーが発生しています。誰かが私のajaxリクエストを適切に形成する方向に私を向けることができますか?

新しいアイテムのフォーム:

アクション

index.jsを表現する

newItem の API エンドポイント

process_params (/Users/mary/working-files/closet-redux/node_modules/express/lib/router/index.js:330:12) 次の (/Users/mary/working-files/closet-redux/node_modules/express) /lib/router/index.js:271:10) で即時。(/Users/mary/working-files/closet-redux/node_modules/express-session/index.js:432:7)