redux-form: Remote submit breaks when submit function passed to handleSubmit

I’ve been messing around with remote submit lately and it works beautifully whenever I pass my submit function to reduxForm() as a config value. However, if I instead supply it to my handleSubmit() function on the form, my app breaks with the following error:

You must either pass handleSubmit() an onSubmit function or pass onSubmit as a prop

Note that I am using redux-form/immutable and that I’m using stuff like bindActionCreators so maybe there is some weird combination there or maybe my implementation is simply wrong, but this seems like a bug to me.

I’m using: redux-form v6.2.1 redux v3.6.0 react v15.3.1

Here’s a simplified version of my code:

Wrapper.js

import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { submit } from 'redux-form/immutable';

const mapDispatchToProps = function (dispatch) {
  return bindActionCreators({
    submit: submit
  }, dispatch);
};

class Wrapper extends Component {
  render() {
    return (
      <MyForm />
      <SubmitButton submit={submit} />
    );
}

export default connect(mapStateToProps, mapDispatchToProps)(Wrapper);

MyForm.js

import validate from './validate';

class MyForm extends Component {
  mySubmitFunction = (values) => {
    console.log('submitted!');
  }

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

    return (
      <form onSubmit ={handleSubmit(this.mySubmitFunction)}>
        <Field ...fieldProps />
      </form>
    );
  }
}

export default reduxForm({ form: 'myForm', validate })(MyForm);

SubmitButton.js

export default class SubmitButton extends Component {
  submit = () => {
    this.props.submit('myForm');
  }

  render() {
    return <button onClick={this.submit}>Submit</button>
  }
}

Shouldn’t this code work? I’m making my submit function local to the MyForm class here, but it still breaks if it is an external function. Once again, this works perfectly if I pass an external submit function to reduxForm() instead. Is this a bug?

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 5
Comments: 18 (5 by maintainers)

Commits related to this issue

added test for #2238 — committed to redux-form/redux-form by erikras 8 years ago

Most upvoted comments

4th option: a <Form> component that’s just a shallow wrapper for <form>, which will already know what is passed to its onSubmit so you can use your redux-dead-drop strategy to listen for dispatched submit actions and call submit?

E.g. <Form onSubmit={handleSubmit(...)}>

+11

davidkpiano on Dec 21, 2016

I struggled with this for a few hours. And it was as simple as including “Form” in the redux-form import statement

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

And changing to an uppercase “Form” for my form tag.

<Form name={formName} id={formName} onSubmit={handleSubmit(() => this.submitForm())}>

And I can now remotely submit the form from an action

// Submit the form
dispatch(submit(formName));

I agree that the documentation should be updated to include an example like this.

+10

mdrideout on Jul 6, 2018

@sunnysingh I have discovered that there is a way to fire off an actionCreator from an external function here. If you check out the reduxForm docs and look at the onSubmit function parameters you will see that the second param that is passed in is the Redux dispatch function. So if you want to use an action for an external function, you could do something like this:

import * as actionCreators from './actionCreators';

function externalSubmit (values, dispatch, props) {
  dispatch(actionCreators.submitAction(values));
}

export default reduxForm({
  form: 'remote',
  onSubmit: externalSubmit
})(MyComponent);

Unfortunately I still don’t know a great way to get your general Redux state props in that function. The third props parameter appears to only contain props specific to Redux Form and not everything passed into the connected component (like the docs seem to imply). Hopefully that helps you!

andynoelker on Dec 21, 2016

Fix published in v6.4.0.

erikras on Dec 23, 2016

@erikras I am having this same problem in version 6.6.3. I do not understand the suggested fix. Just change the <form> to <Form>?? I tried that and still, dispatching submit does not work. Whatever the fix is, can you please add it to the remote submit example documentation, or a more thorough explanation here?

dqhendricks on Jul 7, 2017

I don’t care what they say; you’ve got a good head on your shoulders, @davidkpiano. 😄

erikras on Dec 21, 2016

This sounds like a bug. Investigating… 🔍

erikras on Dec 21, 2016