如何使用React开发者工具获取与onClick事件监听器绑定的函数

Question

9

我想使用React开发工具查看网站wanderu.com上的onClick函数源代码，特别是在点击事件中。请注意，我对React开发工具还不太了解，花了大约两个小时来尝试弄清楚它的工作原理。

在这个网站上，在目的地字段之间有一个图像标签，当点击时，它会改变目的地的顺序：

我希望使用React开发工具来查看代码，了解其运作方式。

当我在React开发工具中打开时，我可以看到以下内容：

当我展开onClick选项卡时，它没有显示任何内容。

为什么在这个选项卡中我看不到与onClick绑定的函数？当我回头看这个组件时，我可以看到包含此功能的组件的props。

但我不知道在哪里找到负责切换两个输入字段的函数。

用谷歌搜索“获取onclick函数react devtools”和相关关键字并没有给出有关在React上下文中查看与事件侦听器绑定的函数的有用结果，只涉及原始JS。

在React和React devtools的上下文中，如何查看与事件侦听器绑定的函数？

- kawnah

2个回答

4

如果您在属性菜单中右键单击函数/事件，然后选择“<>转到定义”，它应该会带您进入该函数的源代码。

- James Finn

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Peter · Accepted Answer

开始此任务的一种方法是设置一个事件断点。

在devtools中进入“Sources”选项卡，展开“事件侦听器断点”，找到并展开“鼠标”，然后选择“单击”。这将导致该页面上的代码暂停执行，您可以检查所涉及的代码。

我在您提供的网站上尝试了这个方法，并发现代码被压缩/混淆，这使得调试和逆向工程变得困难，但并非不可能。