Javascript 反应事件单击不仅处理特定元素

因此，我试图在我的React应用程序中实现一个工作演示，我遇到了一个奇怪的问题。我有一些触发某些函数的事件侦听器，但是在一个案例中没有触发click事件，我一辈子都不知道为什么

我已经验证了元素的存在，并且格式与工作元素相同

下面是一段代码：

initEvents(){
  for (const [pos, item] of this.menuItems.entries()) {
    //working click event
    item.DOM.textwrap.addEventListener('click', () => this.navigate(pos));
    //not working
    item.DOM.link.addEventListener('click', () => this.showContent(pos));
    console.log(item.DOM.link); //Shows all link items
  }
}

navigate(pos){
  console.log("navigate"); 
}

showContent(pos){
  console.log("show content");
}

render(){
  return (
    <div>
      <span className="menu__itemText">NAME 1</span>
      <span className="menu__itemLink">LINK</span>
    </div>
  );
}

initEvents（）{
对于（此.menuItems.entries（）的常量[pos，item]）{
//工作点击事件
item.DOM.textwrap.addEventListener（'click'，（）=>this.navigate（pos））；
//不起作用
item.DOM.link.addEventListener（'click'，（）=>this.showContent（pos））；
console.log（item.DOM.link）；//显示所有链接项
}
}
导航（pos）{
控制台日志（“导航”）；
}
展示内容（pos）{
控制台日志（“显示内容”）；
}
render（）{
返回(
名字1
链接
);
}

我还尝试添加一个内联点击事件，但没有成功。我已经验证了z-索引设置在其他元素之上，以避免干扰，但我不知道下一步要尝试什么

---

如果有任何人有任何想法，我们将非常感谢听到他们

我的问题是由于css规则中的“不可链接”元素

pointer-events: none;

---

正在阻止事件通过侦听器或onClick事件触发

您应该使用react

onClick

而不是像

addEventListener

这样的dom方法。显示使用该方法不起作用的内容结果是css规则阻止事件触发。我同意它应该是onClick，但是为什么事件侦听器只为一个元素的单击而不为另一个元素的单击工作，这是毫无意义的。