Question

我有一个非常简单的React应用程序，只有一个选择控件。请参阅工作申请here。选择控件有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行为不当，因为它们缓存了选择标记。在Windows上，按Ctrl + F5快捷键进行硬刷新。在Mac上，按住⌘Cmd和⇧Shift键，然后按下R。

Answer 2

来自文档：

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

NULL

同样，render: function() { return <input type="text" defaultValue="Hello!" />; }和<input type="checkbox">支持<input type="radio">，defaultChecked支持<select>。

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

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

2 个答案: