提交后清除 Redux-Form 字段

Question

你好，祝你有愉快的一天，我是 React 和 redux 的新手，在我的项目中我们没有使用有状态组件，只是使用无状态容器。我有一个包含四个字段的 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;

Answer 1

您可以使用 onSubmitSuccess with reset.

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

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

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

Answer 2

这是做同样事情的另一种方法。 - 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);

Answer 3

仅作记录，您可以在具有 reduxForm HOC 的组件上调用 props.reset()。无需额外的代码行。

提交后清除 Redux-Form 字段

Clear Redux-Form Fields after submitting

submit

reset

redux-form