Question

我在我的应用程序中添加了一个下拉列表。它可以按预期工作，但是在刷新页面时，下拉数据会更改。但是我只希望所选的值。

class App extends Component {
  constructor(props) {
    super(props);
    this.initialState={
      id:'1',
      layers: [
                { id: "1", layer: "A" },
                { id: "2", layer: "B" },
                { id: "3", layer: "C" },
                { id: "4", layer: "D" },
                { id: "5", layer: "E" },
                { id: "6", layer: "F" }
              ],
      defaultLayer:'A',
     showField:false
    }
    this.state = this.initialState
    this.handleChange = this.handleChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
    this.CheckLayers= this.CheckLayers.bind(this)
   }

CheckLayers(evt){
    if(evt.target.value === '5'){
        this.setState({showField:true})
    }
    let selectedLayer = this.state.layers
                            .find(layer => layer.id === evt.target.value);

    this.setState({
                    projectId:evt.target.value,
                    defaultLayer:selectedLayer.layer});

    }
    handleChange(evt) {
    this.setState({[evt.target.name]: evt.target.value}
        )};


    handleSubmit(evt) {

     if(null == this.state.id){
        this.state.projectId=this.initialState.id
    }

 let selectedLayer = this.state.layers
                            .find(layer => layer.id === this.state.id);
     this.state.defaultLayer = selectedLayer.layer
  }

render(){
    return (
        <div>
        <form  onSubmit={this.handleSubmit}>
            <label>
             Layer:
            <select name="id" onChange={this.CheckLayers}>
            {this.state.layers.map(item => (
                          <option key={item.id} value={item.id}>
                            {item.layer}
                          </option>
                        ))}
            </select>
           { this.state.showField && <input type="text" name="id" value= {this.state.id} 
style={{display:'block'}} onChange={this.handleChange}/>}
            </label>
  <button type="button"  class ="button" value="detail"  onClick= 
  {this.handleSubmit}>Detail</button>
  </form></div>}}}

如果用户在下拉菜单中选择6即显示'F'，但在刷新时仅显示'A'。

Answer 1

刷新页面时，组件将被卸载并再次重新安装，并将使用intialState（defaultLayer：'A'）再次初始化。因此，您看到的也一样。如果要在刷新或用户会话之间保持一致，可以使用诸如localStorage之类的东西来保存感兴趣的值。然后，在initialState中，您可以检查localStorage中是否有东西使用它，否则分配defaultLayer：'A'。

只给您一个想法。在您的initialState中执行以下操作： defaultLayer: localStorage.get('selectedDropdown')

在您的dropdownChange处理程序内部，将其设置为： localStorage.set('selectedDropdown', 'whatever')

Answer 2

您可以将Redux与redux-persist一起使用，也可以将浏览器的localStorage用作快速解决方案。将您的组件更改为

this.initialState={
  id:'1',
  layers: [
            { id: "1", layer: "A" },
            { id: "2", layer: "B" },
            { id: "3", layer: "C" },
            { id: "4", layer: "D" },
            { id: "5", layer: "E" },
            { id: "6", layer: "F" }
          ],
  defaultLayer:localStorage.getItem('defaultLayer') ? localStorage.getItem('defaultLayer') : 'A',
 showField:false
}

在您的处理程序中

handleChange(evt) {
this.setState({[evt.target.name]: evt.target.value})
localStorage.setItem('defaultLayer', evt.target.name);
};

希望有帮助

在刷新下拉菜单中，数据会发生变化

2 个答案: