Select 在 React 中创建的控件不会在浏览器刷新时重置（IE11 和 Edge）

Question

我有一个非常简单的 React 应用程序，只有一个 select 控件。请参阅工作应用程序 here。 select 控件有 3 个值：星期日、星期一和星期二。星期日是默认值。不幸的是，在 IE11 和 Microsoft Edge 上，select 控件即使在浏览器刷新后也会卡在 selected 值上！例如，select 星期二然后刷新浏览器 - select 框不会 return 到星期日，它会在星期二卡住！在 Chrome 和 Safari 上，我没有看到这个问题。（注意：您必须在各种浏览器上下载并运行该应用程序。）

主要组件的代码如下所示。知道为什么 IE 和 Edge 运行不正常吗？

import React from 'react';

class HelloWorld extends React.Component {

  constructor() {
    super();
    this.state = {
      selectedOption: 'sun'
    }
  }

  render() {
    let options = [
      { value: 'sun', label: 'Sunday'  },
      { value: 'mon', label: 'Monday'  },
      { value: 'tue', label: 'Tuesday' }
    ];

    return (
      <select
        className="form-control"
        value={this.state.selectedOption}
        onChange={ e => this.setState({selectedOption: e.target.value}) }>
        {
          options.map(option => {
            return <option value={option.value} key={option.value}>{option.label}</option>;
          })
        }
      </select>
    );
  }

}

export default HelloWorld;

Answer 1

来自文档：

If you want to initialize the component with a non-empty value, you can supply a defaultValue prop. For example:

  render: function() {
    return <input type="text" defaultValue="Hello!" />;
  }

同样，<input type="checkbox">和<input type="radio">支持defaultChecked，<select>支持defaultValue。

https://facebook.github.io/react/docs/forms.html#default-value

Answer 2

Naresh，你的代码没问题。

Internet Explorer 和 Edge 运行异常，因为它们缓存 select 标签。在 Windows 上，按 Ctrl+F5 快捷键进行硬刷新。在 Mac 上，按住 ⌘ Cmd 和 ⇧ Shift 键，然后按 R。

Select 在 React 中创建的控件不会在浏览器刷新时重置（IE11 和 Edge）

Select control created in React does not reset on browser refresh (IE11 and Edge)

internet-explorer-11

reactjs

microsoft-edge