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

如果我选择“默认”以外的任何选项并刷新页面，则路径和页面内容保持不变，但所选选项将恢复为默认值。我希望它在页面刷新时保持不变。有没有办法实现这个目标？

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

  }
}

Answer 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

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

2 个答案: