V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
zty7723271
V2EX  ›  React

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

  •  1
     
  •   zty7723271 · 2021-01-09 01:16:12 +08:00 · 3013 次点击
    这是一个创建于 1441 天前的主题,其中的信息可能已经有所发展或是发生改变。

    补充信息:

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

    window.Fthis = this

    然后 Fthis.setState
    max3
        10
    max3  
       2021-10-11 21:00:15 +08:00
    @weixiangzhe 太感谢了,之前搜了很多相关信息都没检索到
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2677 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 00:21 · PVG 08:21 · LAX 16:21 · JFK 19:21
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.