如何利用油猴脚本点击react中dropdown的元素

cxxjackie

miaoxu 发表于 2022-10-18 21:10
[md]```
大佬，分析页面元素有没有教程啊，我看了代码发现只针对我给的页面，用在实际项目就很难定位了。 ...

在元素上右键“检查”就会自动定位了（chromium内核浏览器），选择器的写法参考：
https://bbs.tampermonkey.net.cn/thread-1821-1-1.html
那个demo的页面我是利用了两个元素之间id上的对应关系来定位的，你这个贴出来的页面似乎没有什么特征，可能写起来比较麻烦，建议再往父级元素上找找。

miaoxu

李恒道 发表于 2022-10-18 21:22

可以参考
React事件触发：https://bbs.tampermonkey.net.cn/thread-1250-1-1.html
那个文章

用react developoer tools试了一下，没有找到对应的value，感到绝望
!

miaoxu

cxxjackie 发表于 2022-10-18 13:04

React事件触发：https://bbs.tampermonkey.net.cn/thread-1250-1-1.html
ElementGetter：https://bbs.tamp ...

大佬，我在你和李恒道大佬的指导下，用react developer定位元素，直接用title属性，成功了，问题解决了，但我是直接定位元素‘

option.click();而没有

option[prop].onClick();

再有就是用react developer定位的是我定位元素的父节点，里面存储的是下拉框的value，但是我定位这个元素之后，获取父节点，不论是click还是option[prop].onClick();都不成功，反而是直接click成功了。

cxxjackie

miaoxu 发表于 2022-10-19 11:13
[md]大佬，我在你和李恒道大佬的指导下，用react developer定位元素，直接用title属性，成功了，问题解决 ...

因为插件看到的是React的虚拟DOM，上面的节点不一定都是真实的，有一部分是虚拟节点，真实的父节点和子节点之间可能隔着数个虚拟节点，所以插件里的“父节点”，与真实页面中的父节点很可能不是同一个。要取虚拟父节点，得从他的__react属性中的parent、child、children等上下级关系来确定（不同属性的处理方式也不同）。这个例子可以直接click，是因为onClick事件不需要传参，React之所以难触发就是因为参数的target指向不对，没有参数的事件正常冒泡就能触发。

miaoxu

cxxjackie 发表于 2022-10-19 13:01
因为插件看到的是React的虚拟DOM，上面的节点不一定都是真实的，有一部分是虚拟节点，真实的父节点和子节 ...

原来如此，还是要看框架的源码啊，不过问题是解决了，感谢各位大佬！