在使用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)