未分類
11 1 月 2021

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

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

資深大佬 : zty7723271 2

补充信息：

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

  • 資深大佬 : IGJacklove

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

  • 資深大佬 : weixiangzhe

    之前我撸了个油猴的时候有找过，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

    学习了 ~~~

  • 資深大佬 : xiaojiqiaozhi

    获取 input 的 ref，给 ref 加个 onchange 监听事件

  • 資深大佬 : gouflv

    全局 event-bus

  • 主 資深大佬 : zty7723271

    @weixiangzhe 感谢！！！亲测可行，下周不用花 2 天时间重新做了

  • 資深大佬 : yazoox

    牛

  • 資深大佬 : px920906

    react developer tools 了解一下