Wie kann ich das Formular beim Redux Formular zurücksetzen?

Question

Ich erstelle eine grundlegende Portfoliowebsite mit einem Kontaktformularabschnitt, in dem Personen über Formspree eine Nachricht an meine E-Mail-Adresse senden können. Ich benutze Redux Forms dafür und das Formular funktioniert, aber ich möchte die Formularfelder zurücksetzen und eine Art "Erfolg" -Meldung bei erfolgreichem Senden hinzufügen.

Ich habe 2 Methoden ausprobiert: 1) Anruf this.props.resetForm() und 2) Anruf dispatch(reset('ContactForm'). Beide haben nicht funktioniert. Hier

ist der Code:

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) 
); 

Aktionen/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

1. Sie müssen Konstruktor Klasse Kontakt hinzuzufügen.

   Klasse Kontakt erweitert Komponente { Konstruktor (Stützen) { super (Stützen); } ...

2. Setzen Dispatch (Reset ('ContactForm')) nach Rückkehr-Syntax, würde es nie aufgerufen werden. Übrigens soll der Action Creator eine reine Funktion sein. Das Hinzufügen einer Dispatch-Aktion ist keine gute Idee.

Hoffe diese Hilfe.