【发布时间】：2018-12-14 01:32:41
【问题描述】：
我有一个带有输入字段的组件和一个按钮，除非在输入字段中输入了正确的值，否则该按钮会被禁用。这工作正常，但是当 chrome 在页面加载时自动完成这些值时，状态不会改变，因此按钮保持禁用状态。如果您在表单内部单击或更改值，则状态会正确更改。
如何在组件加载时从自动完成中获取值？自动完成不会触发 onChange 或 onBlur 事件，并且 autocomplete="off" 也不起作用。 （我也不想关闭自动完成）
【问题讨论】：
-
在组件的渲染事件之后检查是否有任何字段已经有值？如果是这样，相应地更新状态。每个浏览器处理自动填充的方式不同，因此我们无法关联将触发的事件。基于 webkit 的浏览器会为自动填充的元素添加一个类，您可以检测到，但这不适用于非基于 webkit 的浏览器。
-
尝试这样做，但我怎样才能获得这些值？在 componentDidMount() 中，该值仍然是 ''。参考也不起作用。也许我可以用 setTimout 破解它，但这似乎是错误的。在 chrome 控制台中使用普通的旧 js，我可以访问这些值，但不能做出反应。
-
可以得到HTML节点的实际值。所以我会查询选择器所有输入节点，并将它们的值与状态中的值进行比较，以便组件的状态再次与 HTML 输入的状态匹配。
-
感谢您的帮助。当我从 react 访问 dom 节点时（即使超时）它没有值（我尝试了普通的 document.querySelector 和 refs）。看来这个问题自 2014 年以来一直存在，但仍未解决：github.com/facebook/react/issues/1159 我想暂时启用该按钮，并在表单更改后将其禁用（并且值不正确）
-
我们无法解决它，因为自动完成功能在所有浏览器中的工作方式不同。所以我们必须通过比较值来修复它，直到浏览器处理自动完成的标准化方式。但这将需要几年的时间，没有准备好解决这个问题的规范。所以我知道 facebook 不会将非生产就绪的东西放入反应中。
标签： javascript reactjs google-chrome autocomplete