페이지를 reactjs로 남긴 후 양식에 값 저장

Question

사용자가 앞뒤로 이동할 수있는 양식이 많지만 서식이 돌아 왔을 때 양식은 왼쪽과 같이 있어야하며 모든 값은 즉시 제출하십시오.

나는 모든 형태의 값을 일시적으로 저장하는 큰 객체를 유지할 것이라고 생각했으며, 그때까지 제출 된 것입니다. 페이지로 돌아올 때마다 그 특정 개체를 value 속성에 넣기 만하면됩니다.

이 문제는 채워진 양식으로 돌아 가면 더 이상 편집 할 수 없다는 것입니다.

어떻게해야합니까? 또한,이 작업을 수행하는 가장 좋은 방법이 있다면 완전히 변경할 수 있습니다.

// form3 only has to text fields, and form4 only has a file entry, 
//which is why they aren't objects 
//form1 and form2 on the other hand are huge and generate dynamically (I get 
//all their fields through a get request and don't necessarily know 
//how many there will be 
export var formDataObject = { 
    form1:{}, 
    form2:{}, 
    form3:{ 
     field1:"", 
     field2:"" 
    }, 
    form4:"" 
}; 

// for the next part I'll use form3 as an example since it is simple: 
//The Form3 component is just a simple text input, I include the code 
//of that too in case it's needed 
export default class FullForm3 extends Component{ 

    constructor(props){ 
     super(props); 
     this.state ={ 
      initial_field1: formDataObject.form3.field1, 
      initial_field2: formDataObject.form3.field2 
     } 
    } 

    render(){ 
     var field1Value, field2Value; 
     if (this.state.initial_field1.length>0) 
      field1Value = formDataObject.form3.field1; 
     if (this.state.initial_field2.length>0) 
      field2Value = formDataObject.form3.field2; 
     return (
      <div> 
       <Panel> 
        <Form3 controlId="field1Id" label={field1Label} 
          value={field1Value}/> 
        <br/><br/> 
        <Form3 controlId="field2Id" label={field2Label} 
          value={field2Value}/> 

      </div> 

      ); 
     } 
} 

class Form3 extends Component{ 
    constructor(props){ 
     super(props); 
     this.state = { 
      value: formDataObject.form3, 
     }; 
     this.handleChange = this.handleChange.bind(this); 
     this.handleSubmit = this.handleSubmit.bind(this); 
    } 

    handleChange(e) { 
     const value = Object.assign({}, this.state.value); 
     value[e.target.id] = e.target.value; 
     this.setState({ value }); 
     formDataObject.form3= this.state.value; 
    } 

    handleSubmit(e){ 
     //things for submit (not important) 
    } 

    render(){ 
     return (
      <Form inline onSubmit={this.handleSubmit}> 
        <ControlLabel>{this.props.label}</ControlLabel> 
        <FormControl 
         type='text' label='Text' 
         value={this.props.value} onChange={this.handleChange} 
        /> 
       </FormGroup> 

      </Form> 
     ) 
    } 
} 

Answer 1

내가 몇 단계를했다 : 나중에에 대한 formData을 저장 OnInputChange

1. 제어 만들기 양식/입력
2. 여기
   몇 가지 의견을 설명하는 것들로 몇 가지 관련 코드 setState()에서 콜백 내에서 사용 (localstorage 사용)
3. 생성자에 저장된 데이터 가져 오기 (예제에서는 더 읽기 가능)/componentWillMount 및 setS 당신이 여기

당신이 개 입력 전체 구성 요소가 새로 고침 후 이러한 입력을 편집 할 수 있습니다 이제

저장된 값으로 입력 탓에 :

class SimpleInputs extends Component { 
    constructor(props) { 
    super(props); 

    if(localStorage.getItem('formData')) { 
     this.state = JSON.parse(localStorage.getItem('formData')); //in this case the state is just for input values 
    } else { 
     this.state = { 
     value1: '', 
     value2: '' 
     } 
    } 

    this.handleInput1Change = this.handleInput1Change.bind(this); 
    this.handleInput2Change = this.handleInput2Change.bind(this); 
    } 

    handleInput1Change(event) { 
    this.setState({ value1: event.target.value },() => { 
     localStorage.setItem('formData', JSON.stringify(this.state)); 
    }); 
    } 
    handleInput2Change(event) { 
    this.setState({ value2: event.target.value },() => { 
     localStorage.setItem('formData', JSON.stringify(this.state)); 
    }); 
    } 

    render() { 
    return(
     <form> 
     <label>Name</label> 
     <input type="text" value={this.state.value1} onChange={this.handleInput1Change}/> 
     <label>Phone number</label> 
     <input type="text" value={this.state.value2} onChange={this.handleInput2Change}/> 
     </form> 
    ); 
    } 
}