React: 错误：Firefox：自动完成/自动填充仍然不起作用

创建于 2020-05-23 · 3评论 · 资料来源: facebook/react

描述、重现步骤和沙箱示例见#17022！
Firefox 的本机自动完成功能仍然无法正常工作。

这也会影响其他框架（antd、material UI）：

如果 React 社区的某个人可以试一试，那就太好了，因为我认为本机自动完成是一个非常重要的 UX 功能。

Unconfirmed

资料来源

Hadsch

最有用的评论

我已经研究过这个，这似乎是因为 React 将输入 DOM 节点的defaultValue设置为当前的value以用于受控输入。当您在 Firefox 中提交node.value === node.defaultValue它不会将其保存为自动填充。它没有记录在任何地方，我只是发现了测试（也没有 React）。

删除这个“解决”问题：
https://github.com/facebook/react/blob/1d85bb3ce13401644a5e345f8bc84522c59a951c/packages/react-dom/src/client/ReactDOMInput.js#L420

React 确实将defaultValue分配给当前value的原因是因为如果您有一个带有type="reset"的输入并单击它，您将在您的控制中得到空白字段如果您删除了该行，则输入（尽管下一次重新渲染会修复它们）。至少这是我通过浏览代码所理解的。

您可以通过让defaultValue返回一个空字符串来使 Firefox 上的自动完成/自动填充在受控输入上工作：

  function handleChange(event) {
    Object.defineProperty(event.target, "defaultValue", {
      configurable: true,
      get() { return "" },
      set() {},
    });
    setValue(event.target.value);
  }

只要您没有type="reset" 。否则，您会注意到所有字段都被重置为空白（不过，下次重新渲染会修复它们）。不过我不推荐这个，它是一个“黑客”，我还没有在任何地方使用过它，可以说它是 100% 可靠的。

无论如何，这可能是 Firefox 中的一个错误 .. 或一个功能（错误？），但我没有在规范、MDN 或其他地方找到任何描述node.value === node.defaultValue应该避免保存自动填充的内容🤷‍♀️

我正在/正在做一个 PR 来解决这个问题……但是，也许 Firefox 可以在他们这边解决它？ 🙈（不清楚是不是bug）
很高兴知道 React 核心团队的任何人是否知道这个问题和/或我们可以做些什么。

编辑：这是一个演示 Firefox 中的问题的演示。这是纯 HTML + 3 行 JS 代码：
https://codesandbox.io/s/naughty-feather-vwl6v?file=/index.html
所以这本身不是 React 问题🤔

eddyw 于 2020-05-30

👍3

所有3条评论

删除这个“解决”问题：
https://github.com/facebook/react/blob/1d85bb3ce13401644a5e345f8bc84522c59a951c/packages/react-dom/src/client/ReactDOMInput.js#L420

您可以通过让defaultValue返回一个空字符串来使 Firefox 上的自动完成/自动填充在受控输入上工作：

  function handleChange(event) {
    Object.defineProperty(event.target, "defaultValue", {
      configurable: true,
      get() { return "" },
      set() {},
    });
    setValue(event.target.value);
  }

eddyw 于 2020-05-30

👍3

如果有人感兴趣，我打开了这个：
https://bugzilla.mozilla.org/show_bug.cgi?id=1642570
😅

eddyw 于 2020-06-12

我相信这是#15739 的重复

mnoorenberghe 于 2020-07-21

此页面是否有帮助？

0 / 5 - 0 等级

React: 错误：Firefox：自动完成/自动填充仍然不起作用

最有用的评论

所有3条评论

相关问题