如何使用dom了解react中的元素是否具有onClick事件

Question

因此系统要求我在网站上几乎所有onclick事件上添加/报告分析事件。

我以前没有做过分析，但是建议我的方法是为每个事件创建一个通用数据集，并在单击操作期间触发分析事件。意味着我将不得不修改每个onclick函数（或者这是我能够理解的功能

我正在考虑创建一个遍历所有元素的脚本，查看该元素是否具有onClick事件，听那些onclick事件，然后在发生诸如click之类的操作时，他们进行报告

关于SF的这个问题与get all elements with onclick in them?类似，但对于React，onclick事件显示为空吗？ （即代码段返回空数组）。

我的问题类似于以上问题，但仅针对React。在React应用程序中，如何通过onclick事件获取所有元素？

Answer 1

[这里，进入HTML页面时，我将页面中的所有按钮都显示为HTMLCollection，并检查每个按钮是否都具有OnClick事件。就我而言，只有两个按钮（第一个和第三个按钮）。您可以将标签名称更改为要检查的名称。

window.addEventListener('DOMContentLoaded', (event) => {
  let buttonsCollection = document.getElementsByTagName("BUTTON");
  let buttonsWithEvents = [];

  for(let i = 0; i < buttonsCollection.length; i++) {
    if(buttonsCollection.item(i).onclick !== null) 
      buttonsWithEvents.push(buttonsCollection.item(i));
  }
  console.log(buttonsWithEvents);
});

function add() {console.log('add');}
function sub() {console.log('sub');}

function MyButtons(props) {  
  return (
    <div>
      <button onClick = {add}>First</button>
      <button>Second</button>
      <button onClick = {sub}>Third</button>
    </div>
    );
}

控制台输出（如预期）：

打开每个文件夹时，您会找到想要的所有详细信息。