Question

你好，祝你有愉快的一天，我是新的反应和redux在我的项目中我们没有使用statefull组件，只是无状态的容器。我有一个带有四个字段的redux表单。当我提交表单时，我希望字段清除。我看到一些关于调度的事情（重置（'myForm'）。我的问题是我必须把它放在哪里？在我的容器中并将它作为道具传递给我的组件？

我的容器是这样的：

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与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

只是为了记录，您可以在具有 props.reset() HOC 的组件上调用 reduxForm。不需要额外的代码行。

提交后清除Redux-Form字段

3 个答案: