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

2021-01-09 01:16:12 +08:00
 zty7723271

补充信息:

  1. 页面自然渲染完成后,DOM 事件只有 ReactEventListener.js 里的事件,这些方法在控制台没有办法直接调用触发
  2. DOM 是通过 jsonp 的方式渲染的虚拟 dom,各监听事件就是在 jsonp 返回的 js 方法里面与 ReactEventListener.js 里的事件进行绑定的
  3. 想要在控制台输入前端脚本做的事情是:"修改表单标签内容" -> "触发网站原有 dom 的 onchange 事件" -> "提交表单获取结果"。(再具体点就是:修改 input 的值 -> 触发 input 的 onchange 事件 -> 点击搜索按钮获取结果)
  4. 阻塞现象描述:可以修改 input 标签的内容,但仅仅修改只是在留在显示层面,提交表单后,还是会使用 input 标签修改前的值去获取结果
2974 次点击
所在节点    React
10 条回复
IGJacklove
2021-01-09 01:22:21 +08:00
在 react 里面把事件绑定到 window 上?这样可以吗?
weixiangzhe
2021-01-09 01:42:21 +08:00
之前我撸了个油猴的时候有找过,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
justin2018
2021-01-09 08:09:18 +08:00
学习了 ~~~
xiaojiqiaozhi
2021-01-09 08:55:07 +08:00
获取 input 的 ref,给 ref 加个 onchange 监听事件
gouflv
2021-01-09 10:54:44 +08:00
全局 event-bus
zty7723271
2021-01-09 14:10:41 +08:00
@weixiangzhe 感谢!!!亲测可行,下周不用花 2 天时间重新做了
yazoox
2021-01-09 18:21:00 +08:00
牛🐮比唉。学习一下
px920906
2021-01-09 18:35:25 +08:00
react developer tools 了解一下
xieqiqiang00
2021-03-01 10:57:31 +08:00
render 里

window.Fthis = this

然后 Fthis.setState
max3
2021-10-11 21:00:15 +08:00
@weixiangzhe 太感谢了,之前搜了很多相关信息都没检索到

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/743219

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX