it-swarm.com.de

Löschen Sie die Redux-Formularfelder nach dem Senden

Hallo und ich habe einen schönen Tag. Ich bin neu zu reagieren und redux und in meinem Projekt verwenden wir keine Statefull-Komponenten, sondern nur Statuslose mit Containern. Ich habe ein Redux-Formular mit vier Feldern. Wenn ich mein Formular übermittle, möchte ich, dass die Felder gelöscht werden. Ich sehe etwas über den Versand (reset ('myForm'). Meine Frage ist, wo muss ich es ablegen? In meinem Container und als Requisite an meine Komponente übergeben?

Mein Container ist so:

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

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

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

export default OrdersTradesSearchContainer;
6
user7334203

Sie können onSubmitSuccess mit reset verwenden.

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

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

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

Hier ist eine andere Möglichkeit, dasselbe zu tun. - Redux bietet eine vordefinierte Methode zum Behandeln von Submit mit dem Namen handleFormSubmit. Grundsätzlich können Sie dasselbe auch bei dieser Methode tun. Sie müssen keine zusätzliche Methode verwenden.

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