Maria Minh Maria Minh - 29 days ago 26
React JSX Question

Redux-form calling submit outside form component

I'm building an application with dynamic forms (redux-form). I would like when user click on submit button to print values. Note that my submit button is placed in my application header (outside the form). To achieve this, I'm following this tutorial from Redux-form. When I press the "Save" button, I got this error in my console :

(0 , _reduxForm.submit) is not a function(…)
.

My code :

Submit component

import React from 'react'
import {connect} from 'react-redux'
import {submit} from 'redux-form'

const RemoteSubmitButton = ({dispatch}) =>
<button type="submit" onClick={() => dispatch( submit() ) }>Save</button>
export default connect()(RemoteSubmitButton)


Main component

// Import librairies
import Submit from 'submitBtn'
export default class extends Component {
...
render(){
return (
// html code
<Submit />
)
}
}


submit.js

import {SubmissionError} from 'redux-form'

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))

function submit(values) {
return sleep(1000) // simulate server latency
.then(() => {
window.alert(`You submitted:\n\n${JSON.stringify(values, null, 2)}`)
})
}

export default submit


new.js (New User)

//Import librairies
import submit from 'submit'

class UserForm extends Component {
render() {
const {error, resetForm, handleSubmit} = this.props

return (<form onSubmit={ handleSubmit }>
<!-- Generate dynamic fields -->
</form>)
}
}

let FormWrapper = reduxForm({form: 'newuser', onSubmit: submit})(UserForm)

const selector = formValueSelector('newuser') // <-- same as form name
FormWrapper = connect(state => state.form)(FormWrapper)


Can you tell me what I'm doing wrong? or What can I do to make it work please ?

Answer

The submit action was added in v6.2.0 according to the release notes.

You need to upgrade your version of redux-form in order for this to work.