0
我正在使用redux-form,我希望組件在提交表單時分派兩個動作:第一個動作是從所有表單字段發送數據的動作這是一個內置函數),第二個將用戶的狀態更新爲「註冊」。問題是,當我按照下面的方式進行操作時,內置的handleSubmit函數不起作用,只調用「toggleRegistrationStatus」函數。我該如何去調度這些操作,以便數據得到發送並且狀態同時得到更新? 我的組件代碼:在使用redux-form提交時調度2個動作
import React from 'react'
import { Field, reduxForm } from 'redux-form'
class RegistrationPage extends React.Component {
createAgeOptions(from,to) {
var options = []
for(var i=from; i < to; i++) {
options.push(<option key={i} value={i}>{i}</option>)
}
return options
}
handleRegistration(e) {
e.preventDefault()
const {handleSubmit, toggleRegistrationStatus, registerUser} = this.props
handleSubmit(registerUser)
toggleRegistrationStatus()
}
render() {
return (
<div className="registration">
<form action="" onSubmit={this.handleRegistration.bind(this)} className="registration__form">
<div className="registration__field">
<label htmlFor="name">Name:</label>
<Field component="input" id="name" name="name" type="text"/>
</div>
<div className="registration__field">
<label htmlFor="surname">Surname:</label>
<Field name="surname" component="input" id="surname" type="text"/>
</div>
<div className="registration__field">
<label htmlFor="age">Age:</label>
<Field name="select" component="select" name="" id="age">
{this.createAgeOptions(1948,2015)}
</Field>
</div>
<div className="registration__field">
<label htmlFor="email">E-mail:</label>
<Field name="email" component="input" id="email" type="email"/>
</div>
<div className="registration__field">
<label htmlFor="telephone">Telephone number:</label>
<Field name="telephone" component="input" id="telephone" type="telephone"/>
</div>
<button type="submit">Submit!</button>
</form>
</div>
)
}
}
export default reduxForm({
form: 'registration' // a unique identifier for this form
})(RegistrationPage)
將這項工作的方式,它應該如果我添加驗證?我不希望數據被提交,除非它通過了驗證,我一旦將這個問題分類,我想添加它。 – Umbrella
它沒有工作,不幸的是 – Umbrella
它應該與驗證一起工作,就我而言,驗證是以'handleSubmit'函數爲界限的,而不是onSubmit屬性。那麼現在有什麼問題? – Shota