javascript - 自动完成时的空密码输入值 (React.js)

Question

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

• Why is the value on input[type=password] empty?
• Why the autocomplete on password input doesn't fire onChange event?
  ( it fires on normal input )
• Bonus question: Why there is the second (unnecessary) focus/blur event?

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 元素做任何改变
  
  

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

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

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

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

Answer 1

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

可能的解决方法:创建一个自定义更改处理程序来监听 native 浏览器事件而不是 React 合成事件。这很复杂，因为我们使用验证库中的自定义输入元素而不是 native 输入，我确信它们有自己的更改处理程序来重新验证，我们不想破坏这些

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