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