React-Redux表单不返回值

时间:2017-08-02 11:44:18

标签: reactjs redux react-redux

我已经设置了React-Redux表单,但提交后我在console.log()

中得到一个空对象

这是我的代码

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);

提交表单后,我在控制台中获取空对象。这是屏幕截图https://www.screencast.com/t/lzNoKPwsLU

有关此问题的任何帮助?谢谢!

1 个答案:

答案 0 :(得分:0)

您需要在类中添加构造函数并绑定customHandler函数。

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);

为什么从专业人员调用handleSubmit并将customHandle作为参数传递?

我认为你想调用你的handleSubmit这会更好:

customHandler(values){
     this.props.handleSubmit();
     console.log(values);
     //this.props.stockSave(values);
}