web-dev-qa-db-ja.com

redux形式で初期値をリセットする方法

Redux-formを使用しています。州の入力フィールドに初期値を表示しています。リセットをクリックしても、入力フィールドには初期値が表示されたままです。

入力フィールドをリセットするにはどうすればよいですか？

これは私のコードです：

const mapStateToProps = (state) => {
    return {
        initialValues: {
            name:state.userInfo.data.name,
            email:state.userInfo.data.email,
            phone:state.userInfo.data.phone,
            city:state.userInfo.data.city.name,
        }
    };
}

これが、入力フィールドの初期値を呼び出す方法です。

const renderField = ({ input, label, type, meta: { touched, error } }) => (
    <div>
        <input className="form-control control_new" {...input} placeholder={label} type={type}/>
    {touched && ((error && <span>{error}</span>))}
    </div>
)

<Field type="text" {...name} name="name" component={renderField} label="Enter Your Name" />

ありがとう

reactjsreduxredux-form
14
Sunil tc
import {reset} from 'redux-form';

...

dispatch(reset('myForm'));  // requires form name
12
Harsha W

TLDR：enableReinitialize: trueをフォームに設定します

私は最近、この同じ問題を抱えていて、この投稿に出くわしましたが、答えはまったく機能しませんでした。最終的に解決策を見つけたので、これが誰かの助けになることを願っています。問題は、フォームをリセットしても初期値がリセットされないことです。これは github issue についての質問であり、ここは 現在のドキュメント についての質問です

14
John Hooper

Harshaの答えは正しいですが、 this.props.reset() を呼び出すこともできます。これは、装飾されたフォームコンポーネント内から既にフォーム名を知っています。

単純な例 の「値のクリア」ボタンで実際に動作を確認できます。

14
Erik R.

クリアボタンのonClick時に、次のように異なる関数を呼び出します。

onClick={this.onClearChanges}

この方法でinitialValuesを関数に渡します。誰もが言及したように、enableReinitialize：trueを設定することを忘れないでください。

onClearChanges = () => {
  const { reset, onClearChanges, InitialValues } = this.props;
  reset();
  onClearChanges(InitialValues);
};
2
Ghanashri M

呼び出すメソッドを備えたボタンがない場合は、コンストラクター内でリセットすることもできます。

ドロワーナビゲーターを使用してさまざまな画面（onClickメソッドでクリック可能なボタンではない）に移動するため、リセットする必要がありました。

constructor(props) {
  super(props);
  this.props.reset(); //<-- this
}

その特定のreduxフォームを処理する最初のコンポーネント内で、次に設定します

enableReinitialize: true

そのフォームのために。

0
Sam King