web-dev-qa-db-ja.com

フォームの一部のフィールドをクリアする方法-Redux-Form

私は、多くの入力検証と論理バインディングがあり、ページサイズが大きくなるたびに繰り返しが行われるページに取り組んでいます。そのため、美しくスケーラブルなソリューションを見つけなければなりません。

ユーザーがドロップダウンから「A」として値を選択すると、一部のフィールドが無効になり、一部のフィールドがクリアされ、一部のフィールドがデフォルト値で初期化されます。 1つの関連フィールド（regexpやlenght constraitのような検証ルールはありません）の値を次のような小さなコードで変更できます

  this.props.dispatch(change('xForm','xField','xValue' ))

私の問題は、複数のフィールドをクリアする必要があるとき、

それは私の検証方法によって常にブロックされ、クリア操作は失敗します（注：私はそのようになるはずですが、そうではないはずです）

。

以下のようにいくつかの戦略を試しましたが、y、z、wフィールドにはテキストがあり、検証ルールをトリガーしてエラーを処理しました。そのため、入力にはまだクリアされた値ではなく、古い値があります。

    //Clear    
    this.props.dispatch(change('xForm','yField','' ))
    this.props.dispatch(change('xForm','zField','' ))
    this.props.dispatch(change('xForm','wField','' ))

入力を明確にしたり、入力に依存度が高いページのredux形式の入力に値を割り当てたりするためのベストプラクティスは何ですか。

私は2日間研究していますが、最適な解決策を見つけることができませんでした。 （reduxノーマライザー、reduxフォームユーティリティなど）

ありがとう。

reactjsreduxclearredux-form
19
Tugrul

うわー、それはいくつかの複雑なロジックです。絶対的な理想的な方法は、 plugin() AP​​I を使用して、他のフィールド値が変更されたときにリデューサーの値を変更することです。レデューサーの混乱を完全に制御できるため、複雑なAPIですが、複雑な要件があります。

ただし、あなたが言っているように3つのchange()アクションをディスパッチすることもうまくいくはずです。まだ表示したくないRequired検証メッセージがある場合は、フィールドもuntouch()したい/必要な場合があります。

検証メソッドによって常にブロックされ、クリア操作は失敗します。

スタックトレースまたはコンソールエラー出力を表示することの意味を詳しく説明できますか？

5
Erik R.

これは私のために働いた：

resetAdvancedFilters(){
        const fields = ['my','fields','do','reset','properly']
        for (var i = 0; i < fields.length; i++) {
            this.props.dispatch(change('formName',fields[i],null))
            this.props.dispatch(untouch('formName',fields[i]))
        }
    }
15
chickenchilli

以下を使用して、それぞれの複数のフィールドをクリアし、それらのそれぞれのフィールドにエラーがあればそれもクリアします。

複数のフィールドをリセットする一般的な機能。

import {change, untouch} from 'redux-form';

//reset the respective fields's value with the error if any after
resetFields = (formName, fieldsObj) => {
      Object.keys(fieldsObj).forEach(fieldKey => {

          //reset the field's value
          this.props.dispatch(change(formName, fieldKey, fieldsObj[fieldKey]));

          //reset the field's error
          this.props.dispatch(untouch(formName, fieldKey));

      });
}

上記の共通機能を次のように使用します。

this.resetFields('userDetails', {
    firstName: '',
    lastName: '',
    dateOfBirth: ''
});
10
Aniruddha Shevle

私はこれのためのより良い方法を見つけました、

initialize RFのアクション作成者を使用できます。

let resetFields = {
    firstName: '',
    lastName: '',
    dateOfBirth: ''
}

this.props.initialize(resetFields, true); //keepDirty = true;

KeepDirtyパラメーターがtrueの場合、ユーザーが編集した内容が上書きされないように、現在ダーティなフィールドの値が保持されます。

1
Aniruddha Shevle

そこ。

http://redux-form.com/6.0.0-alpha.4/docs/faq/HowToClear.md/ を見てみましょう

フォーム全体では、4つの方法を使用できます。

A）plugin（）APIを使用して、送信が成功したときにディスパッチされたアクションに応答するようredux-formレデューサーに教えることができます。

B）フォームコンポーネントを単にアンマウントする

C）送信が成功した後、フォーム内からthis.props.resetForm（）を呼び出すことができます。

D）接続されたコンポーネントからreset（）をディスパッチできます

1
SerzN1

次のペイロードを持つメタオブジェクトでディスパッチ関数を使用してみてください。

meta.dispatch({
  type: '@@redux-form/CHANGE',
  payload: null,
  meta: { ...meta, field: name },
})

それはあなたが望むあらゆるフィールドのためのトリックを行う必要があります。

1
Zero

複数のフィールドをクリアする

import {change} from 'redux-form';

const fields = {name: '', address: ''};
const formName = 'myform';

const resetForm = (fields, form) => {
    Object.keys(fields).forEach(field => dispatch(change(form, field, fields[field])));
}

resetForm(fields,formName);
0
vijay