web-dev-qa-db-ja.com

送信後にReduxフォームフィールドをクリアする

こんにちは、素敵な一日を。私は反応して再入荷するのが初めてです。私のプロジェクトでは、ステートフルコンポーネントを使用していません。コンテナでステートレスにしているだけです。 4つのフィールドを持つreduxフォームがあります。フォームを送信すると、フィールドがクリアされます。 dispatch（reset（ 'myForm'）について何かが表示されます。私の質問は、どこに配置する必要があるのですか？コンテナーに入れて、コンポーネントにpropとして渡すのですか？

私のコンテナは次のとおりです：

const mapDispatchToProps = dispatch => (
  {
    submitOrdersTradesSearch: (formSearchOrdersTradesData) => {
      dispatch(searchOrdersTrades(formSearchOrdersTradesData));
    }
  }
);

const OrdersTradesSearchForm = reduxForm({
  form: 'ordersTradesSearchForm',
})(OrdersTradesSearch);

const OrdersTradesSearchContainer =
  connect(null, mapDispatchToProps)(OrdersTradesSearchForm);

export default OrdersTradesSearchContainer;
submitresetredux-form
7
user7334203

onSubmitSuccess と reset を併用できます。

import { reset, reduxForm } from 'redux-form';

const afterSubmit = (result, dispatch) =>
  dispatch(reset('ordersTradesSearchForm'));

const OrdersTradesSearchForm = reduxForm({
  form: 'ordersTradesSearchForm',
  onSubmitSuccess: afterSubmit,
})(OrdersTradesSearch);
36
Andy_D

同じことを行う別の方法を次に示します。 -ReduxはhandleFormSubmitと呼ばれる送信を処理するための事前定義されたメソッドを提供します。そのメソッドでも基本的に同じことができます。追加のメソッドを使用する必要はありません。

import React from "react";
import { reset, reduxForm } from "redux-form";

class Form extends React.Component {
  onSubmit = (formValues, dispatch) => {
    dispatch(reset("streamsForm")); // string here is the name of the form, check the export default reduxForm below.
  };

  render() {
    return (
      <form onSubmit={this.props.handleSubmit(this.onSubmit)}>
        // Your Form related Fields
      </form>
    );
  }
}

export default reduxForm({
  form: "streamsForm"
})(Form);
2
Abhishek Gangwar