在React中創建的選擇控件在瀏覽器刷新時不會重置（IE11和Edge）

Question

我有一個非常簡單的React應用程序，只有一個選擇控件。 請參閱此處的工作申請 選擇控件有3個值：星期日，星期一和星期二。 星期日是默認值。 不幸的是，在IE11和Microsoft Edge上，即使瀏覽器刷新后，選擇控件也會卡在所選值上！ 例如，選擇星期二，然后刷新瀏覽器 - 選擇框不會返回星期日，它會在星期二卡住！ 在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

Naresh，你的代碼很好。

Internet Explorer和Edge行為不正常，因為它們正在緩存select標記 。 在Windows上，按Ctrl + F5快捷鍵進行硬刷新。 在Mac上，按住⌘Cmd和⇧Shift鍵，然后按R.

Answer 2

來自文檔：

如果要使用非空值初始化組件，可以提供defaultValue prop。 例如：

  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