我想使用 React devtools 查看网站上的 onClick 函数的源代码，具体来说，wanderu.com
请注意，我是 React devtools 的新手，对它的工作原理还没有很好的理解。我花了大约 2 个小时试图解决这个问题
在目标字段之间的站点上有一个图像标签，单击该标签会更改目标的顺序:
我想使用 React devtools 来查找代码，看看它是如何工作的。
当我在 React 开发工具中打开它时，我可以看到以下内容:
当我展开 onClick 选项卡时，它没有显示任何内容。
为什么？为什么在这个选项卡中我看不到 onClick 绑定(bind)到的函数？
当我退后一步查看组件时，我可以看到包含此功能的组件的 props:
但我不知道如何或在哪里可以找到负责切换两个输入字段的函数。
谷歌搜索“get onclick function react devtools”和相关关键字并没有给出关于在 react 上下文中查看绑定(bind)到事件监听器的函数的有用结果，只是 vanilla JS。
在 React 和 React devtools 的上下文中，您如何看待绑定(bind)到事件监听器的函数？
最佳答案
开始此任务的一种方法是设置 event breakpoint .
进入 devtools 中的“Sources”选项卡，展开“Event Listener Breakpoints”，找到并展开“Mouse”并选择“click”。这将导致该页面上的代码暂停执行，您可以检查涉及的代码。
我在您提供的网站上对此进行了尝试，发现代码被缩小/混淆了，如您所料，这使得调试和逆向工程变得困难，但并非不可能。
关于javascript - 如何使用 React devtools 获取绑定(bind)到 onClick 事件监听器的函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57148931/