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

Question

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

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

Answer 1

我最近在登录页面上遇到此问题。经过一些研究，我遇到了this issue在ReactJS github上的报道。引用关键部分：

  

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

     

要克服此问题，我们需要：

     

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

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