Redux-Formular nach Serverantwort zurücksetzen

Question

Ich versuche herauszufinden, wie meine Formularfelder zurückgesetzt werden, wenn der Server mit einer 200-Erfolgsmeldung antwortet. Alle Beispiele scheinen sich darauf zu konzentrieren, die Felder zu löschen, wenn die Übertragung erfolgreich ist (unabhängig von der Serverantwort), aber ich möchte die Felder nicht löschen, wenn eine 400-Antwort vom Server vorhanden ist.

In meiner Container-Komponente hat ich:

submit = (data) => { 
    axios.post("/path/to/server", data) 
    .then((response) => { 
     //reset form somehow 
    }) 
    .catch((err) => { 
     //keep values in form and show error message 
    }) 
} 

und ich mache das Formular:

<SubscribeForm onSubmit={this.submit} /> 

In meiner Präsentations-Komponente Ich habe:

let MyForm = props => { 
    const { handleSubmit } = props; 

    return (
    <form onSubmit={handleSubmit}> 
     <label htmlFor="email">Email Address:</label> 
     <Field name="email" component="input" type="text"/> 
     <input type="submit" value="Submit"/> 
    </form> 
); 
} 

// Decorate the form component 
MyForm = reduxForm({ 
    form: 'myForm', 
})(MyForm); 

Answer 1

In redux-form ist der Formularstatus in Ihrem redux Store gespeichert. Das Zurücksetzen Ihres Formulars ist also im Wesentlichen eine Aktion, die diesen Status ändert.

Basierend darauf würde ich versuchen, einen Weg zum Zurücksetzen des Formularzustands von the action creators that redux-form passes as props zu der dekorierten Formularkomponente zu finden. Praktischerweise finden Sie einen mit dem Namen reset.

Die nächste Herausforderung ist, wie Sie eine reset Aktion von innerhalb Ihres onSubmit Rückrufs versenden. Von the docs können Sie sehen, dass onSubmit drei Argumente übergeben wird: values, dispatch und props. Diese geben uns die Werkzeuge, um die Aktion reset zu versenden. Zusätzlich können Sie Ihren Failfall mit einer SubmissionError beheben, die sicherstellen wird, dass die fehlerbezogenen Stützen in der dekorierten Formularkomponente richtig eingestellt sind. Zum Beispiel so:

submit = (values, dispatch, props) => { 
    axios.post("/path/to/server", values) 
    .then((response) => { 
     //reset form somehow 
     dispatch(props.reset()) 
    }) 
    .catch((err) => { 
     //keep values in form and show error message 
     return new SubmissionError({ 
     _error: 'Generic submission failed message here!' 
     }) 
    }) 
} 

Hoffe, das hilft!

Answer 2

Sie könnten mit der Arbeit "react refs" https://facebook.github.io/react/docs/refs-and-the-dom.html

Wenn Sie eine ref zum Formular Komponente setzen, rufen Sie können dann:

<form ref="formRef" onSubmit={handleSubmit}> 
... 

this.refs.formRef.reset(); 

Sie müssen nur darauf achten, den Zugang zu „this.refs“ oder es weiter passieren.