[英]Redux-form calling submit outside form component
我正在使用动态表单(redux表单)构建应用程序。 我想当用户单击提交按钮以打印值时。 请注意,我的“提交”按钮位于应用程序标题(在表单外部)中。 为此,我正在从Redux-form跟踪本教程 。 当我按下“保存”按钮时,我在控制台中收到此错误: (0 , _reduxForm.submit) is not a function(…)
。
我的代码:
提交组件
import React from 'react'
import {connect} from 'react-redux'
import {submit} from 'redux-form'
const RemoteSubmitButton = ({dispatch}) =>
// How to get 'form' prop here ?
<button type="submit" onClick={() => dispatch( submit() ) }>Save</button>
export default connect()(RemoteSubmitButton)
主要成分
// Import librairies
import Submit from 'submitBtn'
export default class extends Component {
...
render(){
return (
// html code
<Submit form="newuser" /> // form prop gonna be dynamic
)
}
}
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(新用户)
//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)
你能告诉我我做错了吗? 或请问我该怎么做才能使其正常工作?
将submit
在加入行动v6.2.0
根据发行说明 。
您需要升级redux-form
版本才能使其正常工作。
编辑:
为了提交表单,您需要在RemoteSubmitButton
组件中使用form
prop:
import React from 'react'
import {connect} from 'react-redux'
import {submit} from 'redux-form'
const RemoteSubmitButton = ({ dispatch, form }) => // Destructure the props here
<button type="submit" onClick={() => dispatch( submit(form) ) }>Save</button>
export default connect()(RemoteSubmitButton)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.