It’s late, I’m tired, but no excuses, this took me about 45 minutes to figure out even with the documentation.
The problem:
I wanted to use Redux Form (v6.0.5) to handle form submissions for a simple login form.
I could get the form to render, and submit, but when I submitted my data, rather than getting back the JSON data as expected, instead I got a funky proxy object:
Proxy {dispatchConfig: Object, _targetInst: ReactDOMComponent, _dispatchInstances: ReactDOMComponent, nativeEvent: Event, type: "submit"…}
Annoyingly now I cannot reproduce the issue that made the Proxy object appear in the first place, but here is sample working code that fixed the issue:
import React, { Component } from 'react'; import LoginForm from '../components/LoginForm'; export default class LoginPage extends Component { doLogin(formData) { console.log('Submitted form data', formData); } render() { return ( <div> <LoginForm onSubmit={this.doLogin}/> </div> ); } }
And the login form itself:
import React from 'react'; import { Field, reduxForm } from 'redux-form'; const LoginForm = (props) => { const { handleSubmit } = props; return ( <form onSubmit={handleSubmit}> <label htmlFor="username">Username</label> <Field component="input" type="text" name="username" /> <label htmlFor="inputPassword">Password</label> <Field component="input" type="password" name="password" /> <button type="submit">Sign in</button> </form> ); }; LoginForm.propTypes = { onSubmit: React.PropTypes.func.isRequired }; // Decorate the form component export default reduxForm({ form: 'login' // a unique name for this form })(LoginForm);
There is a section on this in the documentation, but for the life of me, I couldn’t get my head around it.
All I know is, it seemed to like it more when I switched my LoginForm from a class to a function. But as I say, when I tried to revert my changes back to write up this blog post, it worked as a class all the same.
Hopefully this saves someone some time in the future.
Dude. This was actually super helpful. I referenced your article in here https://github.com/erikras/redux-form/issues/1270
Ahh that’s cool, happy I could help 🙂 In truth I’m still not sure I fully understand how the Redux form submission process is handled. I was looking at it again yesterday and came to the conclusion that what I thought I knew was happening, was not quite what was / is happening. More study required on my part 🙂
since you’re passing it in as onSubmit, you don’t need to pass it on to handleSubmit, as it will us that prop automatically.
Cheers Kelly – I know it’s not correct currently. I have the project open currently, and will update this page once I’ve had another attempt at sorting that onSubmit part. I had so much trouble getting it to work last time – lack of understanding on my part, for sure.
Thanks, I’ve just been back through my code and tested it without passing in
props.onSubmit
and it worked. I have updated the snippet accordingly.