Question

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

我尝试了两种方法：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)
);

动作/ 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'));
}

Answer 1

您需要向类联系人添加构造函数。

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

在返回语法之后放置调度（重置（＆＃39; ContactForm＆＃39;）），它永远不会被调用。顺便说一句，动作创建者应该是一个纯函数。向其添加调度操作不是一个好主意。

希望得到这个帮助。

Answer 2

使用

this.props.reset()

使用此功能可在提交后重置表单。

如何使用Redux表单重置提交表单？

2 个答案: