I've been learning react redux forms from https://redux-form.com/8.3.0/examples/simple/

As shown in the example I have created my form as below

import React, { Component } from 'react';
import { Button, Label, Col, Row } from 'reactstrap';
import { LocalForm, Field } from 'react-redux-form';

class Contact extends Component {
    constructor(props) {
        super(props);
        this.handleSubmit = this.handleSubmit.bind(this);
    }
    handleSubmit(values) {
        console.log(values);
    }
    render() {
        return (
            <div className="container">
                <div className='row row-content'>
                    <div className='col-12'>
                        <h3>Send us Your Feedback</h3>
                    </div>
                    <div className='col-12 col-md-9'>
                        <LocalForm onSubmit={(values) => this.handleSubmit(values)}>
                            <Row className="form-group">
                                <Label htmlFor="firstname" md={2}>First Name</Label>
                                <Col md={10}>
                                    <Field model=".firstname" id="firstname" name="firstname"
                                        placeholder="First Name"
                                        className="form-control"
                                        component="input"
                                    />
                                </Col>
                            </Row>
                            <Row className="form-group">
                                <Label htmlFor="lastname" md={2}>Last Name</Label>
                                <Col md={10}>
                                    <Field model=".lastname" id="lastname" name="lastname"
                                        placeholder="Last Name"
                                        className="form-control"
                                        component="input"
                                    />
                                </Col>
                            </Row>
                            <Row className="form-group">
                                <Label htmlFor="telnum" md={2}>Contact Tel.</Label>
                                <Col md={10}>
                                    <Field model=".telnum" id="telnum" name="telnum"
                                        placeholder="Tel. Number"
                                        className="form-control"
                                        component="input"
                                    />
                                </Col>
                            </Row>
                            <Row className="form-group">
                                <Label htmlFor="email" md={2}>Email</Label>
                                <Col md={10}>
                                    <Field model=".email" id="email" name="email"
                                        placeholder="Email" component="input"
                                        className="form-control" />
                                </Col>
                            </Row>
                            <Row className="form-group">
                                <Col md={{ size: 6, offset: 2 }}>
                                    <div className="form-check">
                                        <Field model=".agree" name="agree"
                                            className="form-check-input"
                                            type="checkbox" component="input"
                                        /> {' '}
                                        <strong>May we contact you?</strong>
                                    </div>
                                </Col>
                                <Col md={{ size: 3, offset: 1 }}>
                                    <Field model=".contactType" name="contactType"
                                        className="form-control" component="select">
                                        <option>Tel.</option>
                                        <option>Email</option>
                                    </Field>
                                </Col>
                            </Row>
                            <Row className="form-group">
                                <Label htmlFor="message" md={2}>Your Feedback</Label>
                                <Col md={10}>
                                    <Field model=".message" id="message" name="message"
                                        rows="12" component="textarea"
                                        className="form-control" />
                                </Col>
                            </Row>
                            <Row className="form-group">
                                <Col md={{ size: 10, offset: 2 }}>
                                    <Button type="submit" color="primary">
                                        Send Feedback
                                    </Button>
                                </Col>
                            </Row>
                        </LocalForm>

                    </div>
                </div>
            </div >
        );
    }
}

export default Contact;

After entering the values when I click Submit button in the handleSubmit() it is showing empty object. Kindly help me to fix this! Thank you.

CodePudding user response：

You need to export it as shown in example

export default reduxForm({
  form: 'simple' // a unique identifier for this form
})(SimpleForm)

Addition to this which value are you passing in handleSubmit? redux-form gets the value directly from Field

And for using this you need to have your redux store setup with react-redux-form. And as suggested by author itself if you are starting project don't use react-redux-form instead use React Final Form