如何使用 react devtools 将函数绑定到 onClick 事件侦听器

Question

我想使用 react devtools 在网站上查看 onClick 函数的源代码，特别是wanderu.com

请注意，我是 React devtools 的新手，对它的工作原理还没有很好的理解。我花了大约 2 个小时试图弄清楚这一点

在目标字段之间的站点上有一个图像标记，单击该标记时，它会更改目标的顺序：

我想使用 react devtools 来查找代码以查看其工作原理。

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

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

为什么？为什么在这个选项卡中我看不到 onClick 绑定的函数？

当我退后一步查看组件时，我可以看到包含此​​功能的组件的 props：

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

谷歌搜索“get onclick function react devtools”和相关关键字并没有给出有用的结果来查看在react上下文中与事件监听器相关的函数，只是vanilla JS。

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

Answer 1

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

进入 devtools 中的“Sources”选项卡，展开“Event Listener Breakpoints”，找到并展开“Mouse”并选择“click”。这将导致该页面上的代码暂停执行，您可以检查所涉及的代码。

我在您提供的网站上进行了尝试，发现代码被缩小/混淆，正如您所料，这使调试和逆向工程变得困难，但并非不可能。