-
-
Notifications
You must be signed in to change notification settings - Fork 1.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Uncaught Error: You must either pass handleSubmit() an onSubmit function or pass onSubmit as a prop #190
Comments
My bad!, |
Running into the same problem, can you elaborate on the solution? |
@sidazhou, the way I fixed it, is to pass a function to the handleSubmit function provided by redux-form: |
I've understood what was the problem:
You would expect the child
has |
The documentation...or lack there of, on this is super annoying. Just to be clear for others with this problem I did below which works import React, {Component, PropTypes} from 'react';
import {reduxForm} from 'redux-form';
class ContactForm extends Component {
static propTypes = {
handleSubmit: PropTypes.func,
fields: PropTypes.object
}
handleSubmit(e) {
//do stuff here
}
render() {
const {fields: {firstName, lastName, email}, handleSubmit} = this.props;
return (
<form onSubmit={handleSubmit(this.handleSubmit)}>
<div>
<label>First Name</label>
<input type="text" placeholder="First Name" {...firstName}/>
</div>
<div>
<label>Last Name</label>
<input type="text" placeholder="Last Name" {...lastName}/>
</div>
<div>
<label>Email</label>
<input type="email" placeholder="Email" {...email}/>
</div>
<button type="submit">Submit</button>
</form>
);
}
}
// Decorate the form component
export default reduxForm({
form: 'contact', // a unique name for this form
fields: ['firstName', 'lastName', 'email']
})(ContactForm); Don't be fooled and do the intuitive thing which would be to define a prop of |
This is why the FAQs mention the difference between |
Thanks to the hint from @dtothefp I was able to nearly solve the issue also for the wizard example. On the Third WizardPage I´m catching the submit call. But I still get the Error "Required prop |
If you are using containers in this case, do check if you are returning Onsubmit function from mapDispatchtoProps. |
I'll write it here again because is how I finally understood it and maybe is easier for other beginners as myself. This is what worked for me:
The parent
|
* In examples, update broken relative links * In docs, GettingStarted section, clarify form values retrieved via onSubmit (#190) * Fix omission in gettingstarted example
Form will be refreshed if users press enter. This is not desirable because the search should be performed while users are typing. Refer to redux-form/redux-form#1270, handleSubmit supposes to do e.preventDefault() to preview form from submitting. Also, refer to redux-form/redux-form#190, we need to pass onSubmit as props to the form
@EnriqueSalaza code started working after gone through your example |
@EnriqueSalazar Thank you so much for calling your submit function In general, I feel like all the examples I've read contain too many occurrences of the word It also doesn't help that many examples seem to be explaining two different ways of doing this, while not clearly showing the two options side by side. |
@dtothefp Thank you so much bro. Really thanks, it was driving my crazy jaja xD |
This is how I bound my form handler (handleFormSubmit) to the handleSubmit:
|
I wouldn't have understood where handleSubmit came from if I haven't seen this example: https://codesandbox.io/s/mZRjw05yp |
I am getting the same error!
Please help! |
Hmm i am getting this error in a this.props.dispatch(submit('myFormName')); and my form is this: <form onSubmit={handleSubmit(this.handleSubmit)}>
...
</form> |
I got this error too, I thought I was passing a function to handleSubmit() but i was passing it some other garbage. |
If this is so different than what the docs explain, why has the docs never been updated? |
@EnriqueSalazar
|
I stumble upon the same issue. It looks like bug. |
I had the same issue as @adamfaryna and @fakiolinho and got this error in a remote submit. In my case, I accidentally had two different components that both initialized with the same form name ( |
@fakiolinho, @adamfaryna, @jasperkuperus and anyone else having a similar issue trying to pass an
I believe the solution is to use the
|
@dfalt Thanks! Works well! |
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. |
I'm using this example here, and I get this error:
Uncaught Error: You must either pass handleSubmit() an onSubmit function or pass onSubmit as a prop
I'm using this with redux-form 3, and I'm using a Modal to display the content, is a dumb component, so is not connected to redux.
Is there anything I'm missing here?
Thanks!
The text was updated successfully, but these errors were encountered: