javascript - 使用来自自动完成的值填充状态（反应）

Question

我有一个带有输入字段的组件和一个按钮，除非在输入字段中输入了正确的值，否则该按钮会被禁用。这工作正常，但是当 chrome 在页面加载时自动完成这些值时，状态不会改变，因此按钮保持禁用状态。如果您在表单内单击或更改值，则状态会正确更改。

加载组件时如何从自动完成中获取值？自动完成不会触发 onChange 或 onBlur 事件，并且 autocomplete="off" 也不起作用。（我也不想关闭自动完成）

标签： javascriptreactjsgoogle-chromeautocomplete

Answer 1

我最近在处理登录页面时遇到了这个问题。经过一番研究，我在 ReactJS github 上发现了这个问题。引用关键部分：

如果我们能够在页面加载后访问自动填充的值，那么编写恶意代码来提取用于网络钓鱼的表单上的信息将变得非常容易。给用户没有反应的机会。可能是浏览器忽略 autocomplete="off" 的部分原因。

为了克服这个问题，我们需要：

1. 接受这样一个事实：当 DOM 节点挂载时，我们不会（也永远不会）访问自动填充的值
2. 接受浏览器带来的安全问题

tl;dr - 出于安全原因，这是故意的，最好在提交时验证输入。