Submit Redux Form from the Parent Component - Remote Submit

Question

Probably I've checked all the docs and questions out there about this problem but I still couldn't fix it since long time. So, I decided to ask here.

As the title says I am trying to submit a redux form from its parent component. I tried adding hidden submit input, into the form and that works although this isn't the redux form way. What should I do?

Thanks for your help.

WorkExperienceForm.js

import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';

import { renderHorizontalTextField } from '../Fields/TextFields';
import { renderTextAreaFieldWithLabelAndPopover } from '../Fields/TextAreaFields';

const WorkExperienceForm = ({ handleSubmit, onSubmit, shouldHide, form }) => {
    if(shouldHide) return false;    
    return(
        <form onSubmit={ handleSubmit(onSubmit) } className="form-horizontal">
            <Field name="companyName"
                type="text"
                label="Company Name"
                placeholder="Apple inc."
                id="input-company-name"
                component={renderHorizontalTextField} />

            <Field name="title"
                type="text"
                label="Title"
                placeholder="Marketing Specialist"
                id="input-title"
                component={renderHorizontalTextField} />

            <Field name="startYear"
                type="text"
                label="Start Year"
                placeholder=""
                id="input-start-year"
                component={renderHorizontalTextField} />

            <Field name="endYear"
                type="text"
                label="End Year"
                placeholder="Blank if current"
                id="input-end-year"
                component={renderHorizontalTextField} />

            <Field name="summary"
                rows="4"
                label="Summary"
                placeholder="Summary..."
                id="input-summary"
                component={renderTextAreaFieldWithLabelAndPopover} />
        </form>
    )
}

export default reduxForm({
    enableReinitialize: true
})(WorkExperienceForm);

This is the parent component

onSubmit(values){        
    this.props.createWorkExperience(values, () => {
        this.props.notify();
    })
}

render(){
    if(!this.props.candidate || !this.props.candidate['workExperience'].length > 0) return this.renderEmptyState();
    const activeClass = this.state.displayForm ? 'btn btn-success btn-block mt8' : 'btn btn-primary btn-block mt8'

    return(
        <div>
            { this.renderWorkExperience() }
            <WorkExperienceForm {...this.props} 
                form='postWorkExperienceForm' 
                onSubmit={this.onSubmit}
                shouldHide={!this.state.displayForm} />

            <button type={ this.state.displayForm ? 'submit' : 'button' }
                htmlFor='postWorkExperienceForm'
                className={activeClass} >{ this.state.displayForm ? 'Save' : 'Add Work Experience' }
            </button>
        </div>
    )
}

Answer 1

Yeah, the documentation is sparse regarding this matter.

I think you may have Context issues. I think you should move the button to the Form Component and pass the mySubmit (renamed it from onSubmit for clarity) function to the Form Component with an arrow function via onSubmit property.

mySubmit(formValues){        
    this.props.createWorkExperience(formValues, () => {
        this.props.notify();
    })
}

<WorkExperienceForm {...this.props} 
      form='postWorkExperienceForm' 
      onSubmit={(formValues) => this.mySubmit(formValues)}
      shouldHide={!this.state.displayForm} />

Then in the Form Component wrap the onSubmit in the handleSubmit function.

<form onSubmit={handleSubmit(onSubmit)}>

Here is a example where we recently had to do this with Redux-Form. Maybe, it will help you some.

Note, we are using FLOW.

Parent Component: beer.add.component.js
Form Component: beer.add.form.component.js

Live production example, so you know that it works.
Note, The SignInForm uses the same pattern.