Wie vorherigen Zustand/Seitendaten zu speichern, bevor in React JS

Question

this.state = { 
 
      name: '', 
 
      color: '', 
 
      description: '', 
 
      beacons: [] 
 
     }; 
 
     
 
     handleColors = (item) => { 
 
      this.setState({ 
 
       color: item.value 
 
      }); 
 

 
     }; 
 

 
    handleBeaconChange = (beacons) => { 
 
      this.setState({ 
 
       beacons 
 
      }); 
 
      
 
     }; 
 

 
    handleInputChange(event) { 
 

 
     this.setState({ 
 
      [event.target.name]: event.target.value 
 
     }); 
 

 
    } 
 
    
 
    <div className="mb-1 margin-input"> 
 
        <span className=" form-font div-width">NAME<span className="font-css top">*</span></span> 
 
         <input type="text" 
 
         className="form-control margin-select" 
 
         placeholder="Name" 
 
         value={this.state.name} 
 
         name="name" 
 
         onChange={this.handleInputChange} 
 
         /> 
 
        </div> 
 

 
        <div className="mb-1"> 
 
         <span className=" form-font div-width"> 
 
          COLOR</span> 
 
         <Select 
 
          className="margin-select" 
 
          value={this.state.color} 
 
          options={colorValues} 
 
          onChange={this.handleColors}/> 
 
        </div> 
 

 
        <div className="mb-1 margin-input"> 
 
        <span className=" form-font div-width">DESCRIPTION</span> 
 
         <textarea 
 
         className="form-control margin-select" 
 
         placeholder="Description" 
 
         value={this.state.description} 
 
         name="description" 
 
         onChange={this.handleInputChange} 
 
         /> 
 
        </div> 
 

 
        <h3 className="">{this.props.label}</h3> 
 

 
        <div className="mb-1"> 
 
         <span className=" form-font div-width"> 
 
          BEACON (s)</span> 
 
         <Select.Async 
 
          multi={true} 
 
          className="margin-select" 
 
          value={this.state.beacons} 
 
          loadOptions={getBeacons} 
 
          onChange={this.handleBeaconChange}/> 
 

 
          <div className="panel-body"> 
 
         <a href={'/new-beacon'} className="pull-right">Add Beacon</a> 
 
         </div> 
 

 
        </div>

Dies ist das Bild auf eine andere Seite gehen. Jetzt nur noch retten i, bevor sie auf eine andere Seite Wie zum Beispiel in diesem Bild vorherige Formulardaten wollte ich Namen und Farbwerte in den Feldern eingetragen hatte, und wenn ich auf „Beacon-Link hinzufügen“ klicken, wird es Weg mich in eine andere Form aber die Werte, die ich in dieser Form eingegeben habe, sind verloren gegangen, wenn ich darauf zurückkommen werde. Irgendwelche Lösungen diesbezüglich?

Answer 1

Sie können von Redux machen, das gleiche zu erreichen. Was Sie tun müssen, ist die Form Zustände in redux Speicher statt der Komponente localState selbst

Sie Minderer wie etwas

const initialState = { 
     name: '', 
      color: '', 
      description: '', 
      beacons: [] 
} 
const BeaconForm = (state = initialState, action) => { 
     switch(action.type) { 
      case 'UPDATE_BEACON_FORM_VALUE': 
       return { 
        ...state, [action.newVal.key]: action.newVal.value 
       } 
      default: return state 
     } 
} 

export default BeaconForm 

aussehen zu speichern und dann eine Aktion haben

export function updataFormValue(updatedVal) { 
     return { type: 'UPDATE_BEACON_FORM_VALUE', newVal: updatedVal} 
} 

Und im Compoentnt

handleInputChange(event) { 

    var data = {[event.target.name]: event.target.value} 
    this.props.updataFormValue(data); 

} 

Abgesehen davon müssen Sie m ake Ihre Komponente Redux kompatibel mit connect, mapStateToProps , etc, die ich davon ausgehen, wissen Sie bereits,

Und dann statt Eingabewert der Einstellung von Staat werden Sie es von Requisiten gesetzt, die youu von redux Speicher erhalten