DHlavaty DHlavaty - 3 months ago 41
React JSX Question

Submit button from outside Redux Form v6.0.0

This question relates to Redux Form v6.0.0 (in time of writing this question it is v6.0.0-alpha.15).

How can I get form validation status (like

pristine
,
submitting
,
invalid
) from outside of form component ?

Let me give an example. This is "classical redux-form" pseudo-structure:

<Form(MyExampleForm)>
<MyExampleForm>
<input name="title" ... />
<submit-button />


...where
<submit-button>
in JSX looks like this:

<button type="submit" disabled={pristine || submitting || invalid} >Save</button>


But in my application, my submit button must be outside of the form, placed on different place in the application (let's say in application header, on the top of whole application).


  1. How can I get those
    pristine
    ,
    submitting
    ,
    invalid
    from outside of Redux-Form? (Without really nasty hacking, if possible :-))

  2. How can I submit that form?


Answer

Just decorate another component with same form name and you have access to same state variables there. Also you can pass it onSubmit function from parent and be able to submit all the Field values from wherever you define them as they are all from redux state, not HTML of current form instance. (it is kind of "hacky" way, but it feels right)

The submit function is defined from parent, not shared in state, so you can have it different for every instance.

class MySubmitForm extends React.Component {
    render() {
        return (
            <button
                onClick={this.props.handleSubmit}
            >
                {this.props.pristine ? 'pristine' : 'changed'}
            </button>
        )
    }
}

export default reduxForm({
    form: 'myFormName'
})(MySubmitForm);