ReactJs查找绑定到元素的所有事件

Question

我正在尝试弄清楚在使用reactJS构建的网站上单击元素时会触发什么事件，我单击该元素后事件被触发，但是当我尝试使用el.click()时，什么也没有发生。如果它是左键或右键单击，则会触发事件，我对reactJS一无所知，但是我读到reactJS有自己的“合成事件”，这些事件应该包装本机事件！因此，我假设el.click()应该触发这个合成事件，不管它是什么。但它没有。

我创建了一个事件，用于将字符串写入控制台，以测试是否在单击该元素时运行它，但没有！相反，触发了原始应用程序事件。

因此，我想，也许如果我可以列出该元素的所有“合成事件”，我就可以使用el.dispatchEvent(event)触发其中一个？

希望我的表述有一定意义。

- AL-Kateb

---

我不确定是否适用于此情况，但您是否考虑将onClick处理程序代码分离为普通函数或类方法，并在需要模拟点击时仅调用该函数/方法？ - Diego Zacarias

实际上这不是我的网站，我无法修改其内容。我正在尝试构建一个与使用reactJS构建的Web应用程序交互的工具。我已经创建了一个事件，应该在单击元素时触发，但有趣的是，当单击元素时，这个事件没有被触发（原始事件被触发），这让我想到该应用程序可能没有使用点击事件，但我不知道是什么原因。 - AL-Kateb

Answer 1

el.dispatchEvent(event) 应该能够正确地分发事件。虽然我认为 "本地" 事件监听器不会被触发。只有 React 内部的监听器才会被触发。合成事件不会泄漏到外部。

尝试在 document.body 上添加一个事件监听器。然后，您可以通过检查 event.target（如果事件没有被阻止冒泡）来确定按钮是否被点击。

- Scarysize

---

谢谢，但我没有一开始的事件，这就是我试图完成的，显然不是点击事件，否则应该已经通过el.click()触发了，对吧？这就是为什么我认为它不是本地事件，那么有没有办法可以获取绑定到此元素的所有内部事件呢？然后在我抓取事件之后，我可以使用事件处理程序作为参数调用dispatchEvent。 - AL-Kateb

据我所知，React在其根节点上只有一个实际的事件监听器。这个监听器负责处理React树中所有节点触发的事件。我认为你无法钩入该监听器。 - Scarysize

如果是这样，我需要找到触发内部事件的本地事件！毕竟，像任何JS一样，它必须使用其中一个本机事件，对吧？这很令人困惑，因为虽然事件是通过鼠标单击触发的，但它不是用click()触发的，我在这里错过了什么吗？ - AL-Kateb

请看这个答案是否有帮助：http://stackoverflow.com/questions/36202010/populate-a-reactjs-input-field-as-an-end-user - Radio-

是的，听起来是这样的。 - Scarysize