reactJS - Formulareingabe anzeigen, wenn der Browser zurückgeht

Question

Ich habe Formular, nach dem Einreichen des Benutzers wird auf eine andere Seite genommen werden. Wenn sie auf die Schaltfläche "Zurück" klicken, kehren sie zum Formular zurück, aber die Eingabedaten sind nicht mehr vorhanden.

Was ist der richtige Weg, um Eingabedaten in reagieren zu reagieren?

Form:

export default class Update extends React.Component{ 
    constructor(){ 
     super(); 
     this.state = { 
      items: { 
       firstName: '', 
       lastName: '', 
      } 
     }; 
    } 
    updateContact(e){ 
     e.preventDefault(); 
     // saving data 
     // then redirect 
     this.context.router.push('/'); 
    } 
    render(){ 
     return(
      <form id="new-form" onSubmit={this.updateContact.bind(this)}> 
       <input type="text" placeholder="First Name" /> 
       <button type="submit" class="btn" >Update</button> 
      </form> 
     ) 
    } 
} 


Update.contextTypes = { 
    router: PropTypes.object.isRequired 
} 

Answer 1

Sie können nicht nur auf den Browser verlassen, es für Sie zu tun, weil es wird nicht funktionieren, vor allem mit dynamisch erzeugten Formen.

Was Sie brauchen, ist eine ordnungsgemäße State-Management-Infrastruktur. Es sieht so aus, als ob du den react router verwendest. Sie müssten Ihren eigenen Status für jede Seite im Verlauf verwalten und dann die Daten speichern. Um es dauerhaft zu machen, können Sie localStorage, sessionStorage oder noch robustere Optionen wie localForage oder serverseitige Synchronisierung verwenden.

Dann würden Sie einen Rückruf bei einer Routenänderung ausführen, die den Status in Komponenten wiederherstellen würde.

Es gibt keine Möglichkeit, dies automatisch zu tun. Sie müssen es für Ihr Formular implementieren.

Sie können sehen, wie scroll-behavior Bibliothek dies für persistierende Scroll-Offset mit Verlauf ändert.