解决节点赋值无效，IE手动引发 React 事件

dongdong

缘起：

一个登录页面，如下操作后：

1. eleName.value = "myname";
   
2. elePass.value = "mypass";

复制代码

页面始终提示是空值，百思不得其解，试了各种方法都无效。最后只好用模拟人工登录解决，也就是模拟鼠标点击，把数据复制到剪贴板，再模拟 Ctrl + V粘贴

请教群里的朋友，建议调试 JS，跟踪进去，可惜俺不写JS，不熟，于是网上搜索：

FireFox debug js

有的朋友可能马上冒出个为什么？为什么不用 Chrome 而用 FireFox

原因在于 FireFox inspect 时会显示节点绑定的事件，我前面曾尝试

ele.fireEvent

那么用 FireFox 一看就知道节点绑定的事件，而不用乱尝试

查找 FireFox调试方法时，一个小伙讲到 FireFox 在节点右边会显示出event，点击打开会显示出事件的类型， 比如 DOM2, React
这时灵光一闪，就想到了可能是 React事件和普通DOM事件不一样，解决问题的关键在这里了

有人说日光之下并无新事，搜索

trigger React onChange event

证实了我的猜想

dongdong

React是个JS框架，我以前不写JS，但是经常看到相关消息，现在再搜索一下，就知道了事件的原委

有的页面的 input 用 onChange 监听并保存值， 我们在操作 IE 控件时写：

1. ele.value = 'val'

复制代码

一般情况下 onChange 事件会被自动引发

但是 React的onChange不会，因为React重写了许多事件，这时你用

1. ele.focus()
   
2. ele.fireEvent("onchange")
   
3. wi.delay(109)
   
4. ele.click()

复制代码

对React的 onChange 事件都是不起作用的

于是页面的JS就会提示你该input还是空值

网上查到了手动引发 React onChange 事件的讨论，可是我平时不写JS，没有经验，怎么办

没有关系，有的朋友对JS很熟，我看得云里雾里的代码，他们可能一眼就懂了

于是我把了解的详细信息，及相关资源写成长篇大论，发在群里，让热心的朋友能够快速切入

果然，群里的 ﻬＫoK☉Ｌ〇 马上试出了可以手动引发 React onChange事件的代码，感谢他的帮助

操作IE控件(IE11)示例代码：

dongdong

var js = /*
    var name = document.querySelector("input[name='userName']");
    var pass = document.querySelector("input[type='password']");
   
    name.value = "GOD is a girl";
    pass.value = "You don't see me";
                                                                        
    var evt = document.createEvent( 'Events' );  
    evt.initEvent("input", true, true);  
    evt.simulated = true;                                   
   
    pass.dispatchEvent(evt);
    name.dispatchEvent(evt); //此句无效
*/

wb.doScript(js)

dongdong

//如果是 Crhome, 创建事件的代码如下：

//for chrome
var ev = new Event('input', { bubbles: true});
ev.simulated = true;
pass.value = ' you don't see me';
pass.dispatchEvent(evt);

dongdong

存在的问题：

只能触发一个 input 的 onChange事件，另一个比如 useName 的input怎么办？

能不能把 evt 变量删除，然后重新创建一个，给另一个input用 ？

虽然现在的解决方案还不完美，好在揭开了一个原先的不解之谜，念头更加畅达了

dongdong

测试方法及相关资源

测试页面：

https://www.weidai.com.cn/home/auth/login.html

你不用注册，代码里赋值后，如果没有引发  React onChange 事件，鼠标在输入框外部点击，会提示是空值


参考：

What is the best way to trigger onchange event in react js
https://stackoverflow.com/questions/23892547/what-is-the-best-way-to-trigger-onchange-event-in-react-js

iaauto

ant.design在 React基础上的，表单验证里加了按键验证，暂时只能模拟粘贴输入内容
https://ant.design/components/form-cn/

dongdong

问题解决了

打开 IE，F12 开debugger, Console里测试JS代码

把预先写好的 JS 代码段粘贴进去，Ctrl + Enter执行，可以直观看到结果

测试几次后，问题解决，不再需要模拟人工登录 了