React-Redux Form not returning values - reactjs

Question

I have setup React-Redux form, but upon submit I am getting an empty object in the console.log()
Here is my code
import React from 'react';
import {reduxForm} from 'redux-form';
import {stockSave} from '../actions/actions';
class Stock extends React.Component {
customHandler(values){
console.log(values);
//this.props.stockSave(values);
}
render() {
const {fields: {id}, handleSubmit} = this.props;
return (
<form onSubmit={handleSubmit(this.customHandler)}>
<input type="text" {...id} />
<button type="submit">Submit</button>
</form>
)
}
};
export default reduxForm({
form: 'myForm',
fields: ['id']
}, null, {stockSave})(Stock);
After submitting the form, I get empty object in the console. Here is the screenshot https://www.screencast.com/t/lzNoKPwsLU
Any help regarding this problem? Thanks!

Answer 1

You need to add a constructor in your class and bind your customHandler function.
class Stock extends React.Component {
constructor(props) {
super(props);
this.customHandler = this.customHandler.bind(this);
}
customHandler(values){
console.log(values);
//this.props.stockSave(values);
}
render() {
const {fields: {id}, handleSubmit} = this.props;
return (
<form onSubmit={handleSubmit(this.customHandler)}>
<input type="text" {...id} />
<button type="submit">Submit</button>
</form>
)
}
};
export default reduxForm({
form: 'myForm',
fields: ['id']
}, null, {stockSave})(Stock);
And why are calling handleSubmit from pros and passing your customHandle as parameter?
I think that you want to call your handleSubmit this would be better:
customHandler(values){
this.props.handleSubmit();
console.log(values);
//this.props.stockSave(values);
}