如何使用 Redux Form 在提交时重置表单？答案

【问题标题】：How to reset form on submission with Redux Form?如何使用 Redux Form 在提交时重置表单？
【发布时间】：2017-05-18 17:32:20
【问题描述】：

我正在创建一个基本的投资组合网站，其中有一个联系表单部分，人们可以在其中通过 Formspree 向我发送消息到我的电子邮件。我为此使用 Redux Forms 并且表单有效，但我想重置表单字段并在成功提交时添加某种“成功”消息。

我尝试了 2 种方法：1) 调用 this.props.resetForm() 和 2) 调用 dispatch(reset('ContactForm')。两者都没有工作。

代码如下：

contact.js：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Field, reduxForm } from 'redux-form';
import { sendMail } from '../actions';


class Contact extends Component {
  renderField(field) {
    const { meta: { touched, error } } = field;
    const className = `form-group ${touched && error && 'has-error'}`;

    return (
      <div className={className}>
        <label>{field.label}</label>
        {field.type == 'text' ?
        <input
          className='form-control'
          type={field.type}
          {...field.input}
        /> :
        <textarea
          className='form-control'
          rows='5'
          {...field.input}
        />}
        <div className='help-block'>
          {touched && error}
        </div>
      </div>
    );
  }

  onSubmit(values) {
    this.props.sendMail(values, () => {
      this.props.resetForm();
    });
  }


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

    return (
      <div id='contact'>
        <h1>Contact</h1>
        <p>Feel free to drop me a mail. Whether it's work-related or about coding, tech, entrepreneurship, travel, football or life in general. I'm always looking to connect with other people.</p>
        <div id='contact-form'>
          <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
            <Field
              label='Name:'
              name='name'
              type='text'
              component={this.renderField}
            />
            <Field
              label='Email:'
              name='email'
              type='text'
              component={this.renderField}
            />
            <Field
              label='Message:'
              name='message'
              type='textarea'
              component={this.renderField}
            />
            <button
              type='submit'
              className='btn btn-primary'
            >
              Submit
            </button>
          </form>

        </div>
      </div>
    );
  }
}

function validate(values) {
  const errors = {};

  if (!values.name) {
    errors.name = "Enter a name"
  }

  if (!values.email) {
    errors.email = "Enter an email"
  }

  if (!values.message) {
    errors.message = "Enter a message"
  }
  return errors;
}

export default reduxForm({
  form: 'ContactForm',
  validate
})(
  connect(null, { sendMail })(Contact)
);

actions/index.js：

import axios from 'axios';
import { reset } from 'redux-form';

export const MAIL_SENT = 'MAIL_SENT';

const ROOT_URL='https://formspree.io/'
const EMAIL = 'xxxxxx@gmail.com'

export function sendMail(values) {
  const request = axios.post(`${ROOT_URL}${EMAIL}`, values);

  return {
    type: MAIL_SENT,
    payload: true
  };
  dispatch(reset('ContactForm'));
}

【问题讨论】：

标签： reactjs redux redux-form react-redux-form

【解决方案1】：

您需要为类联系人添加一个构造函数。

class Contact extends Component {
  constructor(props) {
    super(props);
  }
  ...
};

将 dispatch(reset('ContactForm')) 放在 return 语法之后，它永远不会被调用。顺便说一句，动作创建者应该是一个纯函数。向它添加调度操作不是一个好主意。

希望对您有所帮助。

【讨论】：

【解决方案2】：

使用

this.props.reset()

使用它可以在提交后重置表单。

【讨论】：