保存離開頁面後的表格中的值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

我做到了，在幾個步驟：

1. 創建受控形式/輸入
2. OnInputChange保存FORMDATA供以後在setState（）的回調中使用（我使用localStorage）
3. 獲取保存在構造函數中的數據（在我的示例中更具可讀性）/ componentWillMount和setS要保存的值的輸入泰特
4. 現在你可以刷新後編輯這些輸入

在這裏，你有充分的組件與2個輸入：

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> 
    ); 
    } 
}