使用自动完成功能（React）填充状态值

Question

我有一个包含输入字段和按钮的组件，只有在输入字段中输入正确的值时，该按钮才可用。这个功能很好，但是当Chrome在页面加载时自动填充这些值时，状态不会改变，因此按钮仍然无法使用。如果您单击表单内部或更改一个值，则状态会正确更改。

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

- Stefan Guggisberg

---

检查组件渲染事件后是否有任何字段已经具有值？如果是，则相应地更新状态。每个浏览器处理自动填充的方式都不同，因此我们无法连接将被触发的事件。基于 Webkit 的浏览器将向已自动填充的元素添加一个类，您可以检测到，但这在非基于 Webkit 的浏览器上不起作用。 - Shilly

尝试做那个，但是我怎样才能获取这些值呢？在componentDidMount()中值仍然为空。Refs也不起作用。也许我可以用setTimout来破解它，但那似乎是错误的。在Chrome控制台中使用普通的旧js可以访问这些值，但在React中不行。 - Stefan Guggisberg

您可以获取HTML节点的实际值。因此，我会查询所有输入节点，并将它们的值与状态中的值进行比较，以便组件的状态再次与HTML输入的状态匹配。 - Shilly

感谢您的帮助。当我从React中访问DOM节点时（即使在超时期间），它没有值（我尝试了普通的document.querySelector和使用refs）。似乎这个问题自2014年以来就一直存在，但仍未得到解决：https://github.com/facebook/react/issues/1159 我猜现在先保留按钮启用状态，并在表单更改后（且值不正确时）将其禁用。 - Stefan Guggisberg

我们无法解决这个问题，因为自动完成在所有浏览器中的工作方式都不同。因此，我们必须通过比较值来修复它，直到有一种标准化的方式来处理自动完成。但是据我所知，这将需要另外几年时间，目前也没有准备好解决此问题的规范。因此，我理解 Facebook 不会将非生产就绪的东西放入 React 中。 - Shilly

好的，谢谢！有点惊讶这仍然是一个问题，但是我理解你的观点。 - Stefan Guggisberg

Answer 1

我最近在登录页面工作时遇到了这个问题。经过一些研究，我发现了ReactJS github上报告的这个问题。引用关键部分如下：

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

为了解决这个问题，我们需要：

1. 接受我们不会（也永远不会）在DOM节点挂载时访问自动填充值的事实
2. 接受浏览器提出的安全问题

简而言之-出于安全考虑，这是有意的，并且最好在提交时验证输入。

- cdpautsch