[求 React 大佬] 如何在浏览器控制台通过 JS 或 JQ 触发 React 的数据修改事件，并修改变量内容

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

For Existing Member Sign In

React

This topic created in 1936 days ago, the information mentioned may be changed or developed.

补充信息：

页面自然渲染完成后，DOM 事件只有 ReactEventListener.js 里的事件，这些方法在控制台没有办法直接调用触发
DOM 是通过 jsonp 的方式渲染的虚拟 dom，各监听事件就是在 jsonp 返回的 js 方法里面与 ReactEventListener.js 里的事件进行绑定的
想要在控制台输入前端脚本做的事情是："修改表单标签内容" -> "触发网站原有 dom 的 onchange 事件" -> "提交表单获取结果"。（再具体点就是：修改 input 的值 -> 触发 input 的 onchange 事件 -> 点击搜索按钮获取结果）
阻塞现象描述：可以修改 input 标签的内容，但仅仅修改只是在留在显示层面，提交表单后，还是会使用 input 标签修改前的值去获取结果

DOM

input

修改

表单

10 replies 2021-10-11 21:00:15 +08:00

IGJacklove

Jan 9, 2021 via Android

在 react 里面把事件绑定到 window 上？这样可以吗？

weixiangzhe

Jan 9, 2021

之前我撸了个油猴的时候有找过，vue,react 事件都绑定到 dom 上了，需要自已触发一个事件

```js
const mouseClickEvents = ['mousedown', 'click', 'mouseup'];
function simulateMouseClick(element){
mouseClickEvents.forEach(mouseEventType =>
element.dispatchEvent(
new MouseEvent(mouseEventType, {
view: window,
bubbles: true,
cancelable: true,
buttons: 1
})
)
);
}

var element = document.querySelector('div[class="UFIInputContainer"]');
simulateMouseClick(element);
```

来自 https://stackoverflow.com/questions/40091000/simulate-click-event-on-react-element