在使用redux-form提交時調度2個動作

Question

我正在使用redux-form，我希望組件在提交表單時分派兩個動作：第一個動作是從所有表單字段發送數據的動作這是一個內置函數），第二個將用戶的狀態更新爲「註冊」。問題是，當我按照下面的方式進行操作時，內置的handleSubmit函數不起作用，只調用「toggleRegistrationStatus」函數。我該如何去調度這些操作，以便數據得到發送並且狀態同時得到更新？ 我的組件代碼：

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) 

Answer 1

你可以嘗試刪除從表單元素提交，而是把它當點擊這樣的提交按鈕：

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

class RegistrationPage extends React.Component { 

    constructor(props) { 
     super(props); 
     this.handleRegistration = this.handleRegistration.bind(this); 
    } 

    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 {toggleRegistrationStatus, registerUser} = this.props 
     toggleRegistrationStatus(); 
     registerUser(); 
    } 

    render() { 
     const { handleSubmit } = this.props; 

     return (
      <div className="registration"> 
      <form action="" 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="button" onClick={handleSubmit(this.handleRegistration)}>Submit!</button> 
      </form> 
      </div> 
     ) 
    } 
} 

export default reduxForm({ 
    form: 'registration' // a unique identifier for this form 
})(RegistrationPage)