Wie man Formulardaten in `initialValues` zurückversetzt

Question

Ich habe ein Formular, das dem Benutzer erlaubt, eine Menge Dinge wie hinzufügen, löschen, ändern zu tun. Das Formular nimmt eine Reihe von Daten aus dem Zustand als initialValues und ich habe eine Anforderung für eine Schaltfläche "Rückgängig", die alle Änderungen zurück, wie sie waren, wenn initialValues festgelegt wurde.

Gibt es etwas in Redux-Form gebaut, die dies tun können? Wir verwenden v5.3.3

Answer 1

redux-form auf die Ausgangswerte zurückkehrend wird als aus der Box Feature unterstützt seit Version 6. *

Es ist leicht, in dem Initialize from start Beispiel aus der redux-form Dokumentation zu folgen.

Seit Version 6 * die von redux-form bestanden Requisiten gehören eine reset Funktion müssen die man einfach anrufen:

let InitializeFromStateForm = props => { 
    const { handleSubmit, load, pristine, reset, submitting } = props 
    return (
     <form onSubmit={handleSubmit}> 
     <div> 
      <button type="button" onClick={() => load(data)}>Load Account</button> 
     </div> 
     <div> 
      <label>First Name</label> 
      <div> 
      <Field name="firstName" component="input" type="text" placeholder="First Name"/> 
      </div> 
     </div> 
     <div> 
      <label>Last Name</label> 
      <div> 
      <Field name="lastName" component="input" type="text" placeholder="Last Name"/> 
      </div> 
     </div> 
     <div> 
      <button type="submit" disabled={pristine || submitting}>Submit</button> 
      <button type="button" disabled={pristine || submitting} onClick={reset}>Undo Changes</button> 
     </div> 
     </form> 
    ) 
    }