FormControlでページの更新に選択した値を保持する方法

Question

<FormControl componentClass="select" onChange={handleOptionSelect} value={this.state.selected}> 
    <option value="default"></option> 
    <option value="getasinlimit">Get ASIN Limit</option> 
    <option value="updateasinlimit">Create/Update ASIN Limit</option> 
    <option value="deleteasinlimit">Delete ASIN Limit</option> 
</FormControl> 

reactjsで選択したフォームの値をプログラムで設定する方法はありますか？

"default"以外のオプションを選択してページをリフレッシュすると、ルートとページの内容は同じままですが、選択したオプションはデフォルトに戻ります。私はそれがページリフレッシュで同じままにしておきたい。私はそれを達成する方法はありますか？

Answer 1

セッションストレージに入れます。

// Save data to sessionStorage 
sessionStorage.setItem('key', 'value'); 

// Get saved data from sessionStorage 
var data = sessionStorage.getItem('key'); 

https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

かのlocalStorageあなたも、あなたが選択し、保存したセッションストレージを使用することができます

localStorage.setItem('myCat', 'Tom'); 
var cat = localStorage.getItem("myCat"); 

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Answer 2

ブラウザを閉じた後に戻ってくる値を保持する場合値

class App extends React.Component { 
    constructor(props){ 
    super(props); 

    this.state = { 
     selected : null; 
    } 
    } 

    componentDidMount(){ 
    let selected = window.sessionStorage.getItem("selected"); 
    this.setState({ selected : selected }); 
    } 

    handleOptionSelect(e){ 
    this.setState({ selected : e.target.value }); 
    window.sessionStorage.setItem("selected", e.target.value); 
    } 

    render() { 

     return (
     <FormControl componentClass="select" onChange={this.handleOptionSelect.bind(this)} value={this.state.selected}> 
      <option value="default"></option> 
      <option value="getasinlimit">Get ASIN Limit</option> 
      <option value="updateasinlimit">Create/Update ASIN Limit</option> 
      <option value="deleteasinlimit">Delete ASIN Limit</option> 
     </FormControl> 
    ) 

    } 
}