反应选择输入值不会在页面刷新时重置答案

【问题标题】：React select input value is not resetting on page refresh反应选择输入值不会在页面刷新时重置
【发布时间】：2021-09-17 05:33:15
【问题描述】：

FWIW，我正在使用通过 AWS Amplify 部署的 Gatsby。

我的网站上有一个简单的语言切换器。当我在新选项卡或私人浏览中打开网站时，行为符合预期。它目前默认为英语，您可以切换到德语。但是，当我只是进行简单的刷新时，页面上的可翻译文本会恢复为英语，而选择中显示的是“德语”。然而，最令人好奇的是，检查选择看起来像所附图片。虽然在页面上显示选择了德语，但在 HTML 中，英语选项有 selected=""。哪个是正确的，但为什么显示德语？

  const changeLanguage = (lang) => {
    i18n.changeLanguage(lang);
  };
...
 <select
  value={i18n.language}
  onChange={(event) => changeLanguage(event.target.value)}

【问题讨论】：

也许是一些奇怪的自动填充功能？任何浏览器都会出现这种情况吗？
你能分享一个Minimal, Reproducible Example吗？
如果<options />，key 属性是否有问题？

标签： javascript reactjs aws-amplify

【解决方案1】：

您是否在 Firefox 上遇到过这种行为测试？我在我的 Gatsby 应用程序上遇到了同样的问题，结果证明是 Firefox 错误，因为这种行为在 Chrome 上不会发生（我没有在其他浏览器上测试）。

按照this other answer 中的说明在您的选择标签上设置autocomplete="off" 应该可以解决问题。

【讨论】：

是的，最终这只是一些奇怪的 FF 行为。

【解决方案2】：

需要查看 <select> 组件的其余部分，以了解您正在设置哪些其他道具以及如何填充 <option> 的。但是，在填充孩子时，您是否将 selected 属性设置为正确的 <option>？

此外，<select> 元素 (Select Attributes) 没有 value 属性。如果您使用的是库，则应参考他们的文档。否则，对于直接 HTML，您需要在填充 <option> 时设置 selected <option>。

const languages = ['english', 'german'];

const changeLanguage = (lang) => {
  i18n.changeLanguage(lang);
};

...

<select
  // value={i18n.language} - there is no `value` prop for `select` element
  onChange={(event) => changeLanguage(event.target.value)}
  ...
>
  {languages.map((language) => (
    <option value={language} selected={language === i18n.language} />
  ))}
</select>

更新

@a.mola 请参阅此处提出的类似问题value attribute on <select> tag not selecting default option

此外，这里有一个 <select> 元素的工作示例，其中 value 在 <select> 与 selected 在 <option> 上：

Codepen: HTML Select - Setting Value

【讨论】：