自动完成时的空密码输入值（React.js）

Question

浏览器自动完成我的登录表单后，查询密码输入的值为空。单击密码字段后，该值神奇地可用，浏览器触发的许多事件也没有意义。 （密码输入的onChange不在其中。）

• 为什么input[type=password] 上的值是空的？
• 为什么密码输入的自动完成不会触发 onChange 事件？
  （它会在正常输入时触发）
• 额外问题：为什么会有第二个（不必要的）焦点/模糊事件？

1。两个输入都设置为type="text"

• 两个输入都渲染一次（无自动完成）

注意：我的输入是不受控制但有状态的，我会跟踪焦点、模糊、变化的状态变化

• entered=true 输入值时
• focused=true 当onFocus 被解雇时，=false 当onBlur 被解雇时
• peek=true 当我需要以编程方式强制 type 从 password 到 text

2。输入设置为type="password"

（查看表单是如何自动完成的。）

• ...

• 2.render (红色箭头) - 浏览器聚焦输入

• onChange 在电子邮件输入时触发

• 3.render - 内部状态已更改 (entered=true)

• 4.render - 浏览器未聚焦输入

• 5.render（黄色箭头） - 浏览器再次聚焦输入？

• 6.render - 浏览器未聚焦输入
  浏览器未对 dom 元素进行任何更改
  
  

• 预览密码 - 以编程方式将输入类型更改为text

• 手动 validateForm() - 密码为空，表单无效

• 手动交互也说值为""empty

有趣的是，在浏览器中按下 PrtScr 后，该值变为可用并重新呈现表单 - 就像手动聚焦输入时一样。

Answer 1

React GitHub 上讨论此问题的问题：https://github.com/facebook/react/issues/1159。剧透：它自 2014 年 2 月以来一直处于活动状态，没有解决方案。

可能的解决方法：制作一个自定义更改处理程序来侦听本机浏览器事件，而不是反应合成事件。这很复杂，因为我们使用的是验证库中的自定义输入元素，而不是原生输入，我确信它们有自己的更改处理程序来重新验证，我们不想破坏这些

另一种可能的解决方法：将引用保存到所有表单字段并在提交之前手动获取它们的.value，而不是依赖状态中的托管值，这绝对是非反应性的，绝对不理想