CODEWITHSUNDEEP
reactjsredux-form
NealVDV
NealVDV

Reputation: 2532

Errors with onSubmit handler if submit is called via this.props.submit('formname')

I am having an Error with onSubmit handler in Redux-Form when called from the action creator provided by redux-form. If I use a regular button inside it works as it should.

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

class Property extends Component {
    constructor(props) {
        super(props);

        this.saveOnChange = this.saveOnChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleSubmit() {
        console.log('form submitting');
    }

    saveOnChange() {
        console.log('should auto save');
        this.props.dispatch(this.props.submit('propertySettings'));
    }

    render() {
        const { handleSubmit } = this.props;

        return(
            <form onSubmit={handleSubmit(this.handleSubmit)}>
                // Stuff goes here

                <div onClick={this.saveOnChange}>(just for example it is with a div)</div> // <-- Get's errors
                <button type='submit'>Via button</button> // <-- Work's fine
            </form>
        );
    }
}

Received errros when calling via the action creator

enter image description here

Upvotes: 0

Views: 171

Answers (2)

NealVDV
NealVDV

Reputation: 2532

Updating from version redux-form 6.3.x to 6.4.x solved the issue. See release notes.

Upvotes: 0

Pineda
Pineda

Reputation: 7593

Seems like you were trying to bind the local method of handleSubmit to the scope of the component and then pass it as an argument to the handleSubmit method on props.

If you are just trying to assign the handleSubmit method to the onSubmit of your form you can try this:

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

class Property extends Component {
  constructor(props){
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    // bind handleSubmit in the constructor, it's more efficient
    // as it only occurs once per lifetime of a component
  }
  handleSubmit() {
    console.log('form submitting');
  }
  render() {
    return(
      <form onSubmit= { this.handleSubmit }> // call it here like this
      // Stuff goes here
      </form>
    );
  }
}

Upvotes: 1

Related Questions