如何使 FormControl 在页面刷新时保留其选定的值答案

【问题标题】：How to make FormControl retain its selected value on page refresh如何使 FormControl 在页面刷新时保留其选定的值
【发布时间】：2017-10-26 13:45:11
【问题描述】：

<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 中以编程方式设置所选表单的值？

如果我选择“默认”以外的任何选项并刷新页面，路线和页面内容将保持不变，但所选选项会恢复为默认值。我希望它在页面刷新时保持不变。有什么方法可以实现吗？

【问题讨论】：

标签： reactjs

【解决方案1】：

您可以使用会话存储来保存选定的值

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

  }
}

【讨论】：

如果我希望在更改路径时重置它怎么办？如果我使用 sessionStorage，当我去不同的路线时它会保留它的价值
您可以重置或清除您正在导航的其他组件中的值。假设您正在从登录页面导航到仪表板页面，您需要清除仪表板组件的 componentDidMount 中的会话存储值，如下所示window.sessionStorage.removeItem('selected');
other else you can override the previous value window.sessionStorage.setItem('selected', newValue);

【解决方案2】：

把它放在 sessionStorage 中。

// 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

【讨论】：