jQuery时代，模拟表单输入很简单，本质上就是操作dom，选择对于的dom，给dom.value设置值即可。
到了react时代就不同了，虽然也可以通过js拿到dom，给dom.value设置，但是react的状态绑定下，单纯给dom设置value，可是不会直接让react对于的状态也变化的。举个例子：
<input onChange={e=>console.log(e)} />
这么写一个react组件，通过js得到这个dom后dom.value=123;并不会触发onChange事件。
之前遇到过这个问题，不过没有深究，刚好同事分享到automa，发现automa靠选择器也能模拟表单填写，于是再研究了一下。
1. 原生分发事件其实是有的
如下：
// html
<input id="ninput" />// js
var $dom = document.querySelector('#ninput');
$dom.addEventListener('change', e=>{console.log('trigger change', e, e.target.value);
})// manual js
var $dom = document.querySelector('#ninput');
$dom.value = "123";
$dom.dispatchEvent(new Event("change", {bubbles:true}));利用new Event 和 dispatchEvent就可以触发绑定事件
2. dispatchEvent能否也用在react组件上呢？
既然上面可以，其实理论上，应该也是支持的，先试试下面代码
// jsx
<input onChange={e=>console.log(e)} />// manual js
var $dom = document.querySelector('#root input');
$dom.value = "123";
$dom.dispatchEvent(new Event("change", {bubbles:true}));咦，怎么界面的input确实改成了123，但是没有console.log啊，也就是没有触发onChange
理论上，react上的事件虽然不是直接绑在dom，而是合成事件，但合成事件也是root上绑定的事件，等待冒泡上来的，new Event也设置了bubbles:true
后来在stackoverflow看到一个回答示例，改写了一下：
// jsx
<input onChange={e=>console.log(e)} />// manual js
var $dom = document.querySelector('#root input');const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,'value').set;nativeInputValueSetter.call($dom, '1234');const event = new Event('change', { bubbles: true });$dom.dispatchEvent(event);用了另外一种方式给dom设置value
const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
window.HTMLInputElement.prototype,
'value').set;
nativeInputValueSetter.call($dom, '1234');
触发了console.log，但是 如果重复设置同一个值，也是不会触发到onChange的。
参考：reactjs - What is the best way to trigger change or input event in react js - Stack Overflow
