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

Question

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

  

  
• 为什么input[type=password]上的值为空？
  
• 为什么密码输入的自动填充不会触发onChange事件？
    （它在正常输入时触发）
  
• 红利问题：为什么会出现第二次（不必要的）焦点/模糊事件？
  

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

• 两个输入都会呈现一次（没有自动完成）

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

输入值时
• entered=true
{li} focused=true onFocus被解雇时，=false被onBlur解雇
• peek=true当我需要以type password编译text时type="password"

2。输入设置为onChange

（查看表单的自动填充方式。）

• ...
• 2.render（红色箭头） - 浏览器聚焦输入
• entered=true针对电子邮件输入
• 3.render - 内部状态已更改（text）
• 4.render - 浏览器未聚焦输入
• 5.render （黄色箭头） - 浏览器再次关注输入？

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

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

• manual validateForm（） - 密码为空，表单无效
• 手动互动也表示值为raw Rails.application.assets['path'].to_s 空

有趣的是，在浏览器中按下 PrtScr 后，该值变为可用，并且表格会被重新渲染 - 就像手动聚焦输入一样。

Answer 1

React GitHub讨论这个问题：https://github.com/facebook/react/issues/1159。 Spoiler：它自2014年2月以来一直活跃，没有解决方案。

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

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