CODEWITHSUNDEEP
reactjsredux-form
Jerald George
Jerald George

Reputation: 171

Clear the form field after submitting the form using ReduxForm in ReactJS

After submitting the form successfully i have called the destroy() to clear the fields as given in the redux form document 

    result = (values) => {
        const { history } = this.props;
        this.props.dispatch(addVisitors(values)).then(
          (success) => {
            toast.success(success);
            history.push('/visitors');
            this.props.destroy();
          },
          (error) => {
            toast.error(error);
          }
        );
      };

after submitting form getting error like this

Upvotes: 0

Views: 2463

Answers (2)

Nathan
Nathan

Reputation: 8149

I think you get this error because you're inside an anonymous function and this doesn't refer to your form anymore. For reference, take a look at: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this. To resolve this issue I would try to define a variable outside of the your promise and anonoymous function and refer to that newly declared variable instead of this.props.destroy(); in your promise. For example,

result = (values) => {
        var formFields = this.props;
        const { history } = this.props;
        this.props.dispatch(addVisitors(values)).then(
          (success) => {
            toast.success(success);
            history.push('/visitors');
            formFields.destroy();
          },
          (error) => {
            toast.error(error);
          }
        );
      };

Upvotes: 0

Tung Duong
Tung Duong

Reputation: 1166

You can call this.props.resetForm() from inside your form after your submission succeeds.

submitMyForm(data) {
  const {createRecord, resetForm} = this.props;
  return createRecord(data).then(() => {
    resetForm();
    // do other success stuff
  });
}

render() {
  const {handleSubmit, submitMyForm} = this.props;
  return (
    <form onSubmit={handleSubmit(submitMyForm.bind(this))}>
      // inputs
    </form>
  );
}

You can dispatch reset() from any connected component Extremely flexible, but you have to know your form name and have dispatch available.

import {reset} from 'redux-form';

...

dispatch(reset('myForm'));  // requires form name

With your code I think you can use

import {reset} from 'redux-form';

...

result = (values) => {
  const { history } = this.props;
  this.props.dispatch(addVisitors(values)).then(
    (success) => {
      toast.success(success);
      history.push('/visitors');
      this.props.dispatch(reset('myForm')) // Change to your form name
    },
    (error) => {
      toast.error(error);
    }
  );
};

Upvotes: 1

Related Questions