web-dev-qa-db-fra.com

Effacer les champs de formulaire Redux après la soumission

Bonjour et passez une belle journée, Je suis nouveau pour réagir et redux et dans mon projet, nous n’utilisons pas de composants statefull, mais simplement des conteneurs sans état. J'ai un formulaire de redux avec quatre champs. Lorsque je soumets mon formulaire, je souhaite que les champs soient effacés. Je vois quelque chose à propos de la répartition (reset ('myForm'). Ma question est de savoir où je dois le mettre? Dans mon conteneur et le transmettre comme accessoire à mon composant?

Mon conteneur est comme ça:

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
6
user7334203

Vous pouvez utiliser onSubmitSuccess avec reset .

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

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

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

Voici une autre façon de faire la même chose .- Redux fournit une méthode prédéfinie pour gérer l'envoi, appelée handleFormSubmit . Vous pouvez en principe faire la même chose avec cette méthode. Vous n'avez pas besoin d'utiliser une méthode supplémentaire.

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