javascript - 使用自动完成的值填充状态( react )

Question

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

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

Answer 1

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

If we are able to access autofilled values once the page loads, it would become very easy to write malicious code to extract information on a form intended for phishing. Giving the user no chance to react. Probably part of the reason why autocomplete="off" is ignored by browsers.

To overcome this problem we need to:

1. Accept the fact that we won't (and never will) have access to autofilled values when the DOM node mounts
2. Embrace the security concerns which are brought up by the browsers

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