React函数组件中p标签绑定onClick点击事件无报错不触发如何解决

问题对应代码 #

import { useState, useEffect } from 'react'
// 注：原代码缺少sunIcon、moonIcon的导入声明，此处保留原有逻辑
function Navbar() {
    const [isDark, setIsDark] = useState(false);

   useEffect(() => {
    if (isDark) {
        let body = document.getElementsByTagName("body")[0];
        body.classList.add("dark");
        let darkIcon = document.getElementsByClassName("dark-icon")[0];
        darkIcon.style.display = "none";
        
    } else {
        let lightIcon = document.getElementsByClassName("light-icon")[0];
        lightIcon.style.display = "none";
        
    }
   }, [isDark])

    return (
        <div class="navbar">
        <h1>devfinder</h1>
        <div className="toggle">
        <p onClick={() => {
            setIsDark(!isDark);
        }}className="light-icon">Light <img src={sunIcon} alt="Sun"/> </p>
        <p onClick={() => {
            setIsDark(!isDark);
        }} className="dark-icon">Dark  <img src={moonIcon} alt="Moon"/></p>
        </div>
        </div>
    )
}

export default Navbar;

问题现象 #

绑定在上述代码<p>标签上的onClick函数无法正常触发，控制台无任何报错，事件完全不会被调用。

本案例已定位的问题原因 #

该问题和元素定位有关：绑定事件的元素所在的toggle div设置了float: right属性，给该元素设置相对定位，同时添加z-index属性后即可正常触发点击事件。

通用排查步骤 #

• 检查元素是否被遮挡：打开浏览器开发者工具的元素选择器，直接点击页面上你要触发事件的区域，看选中的元素是不是你绑定了点击事件的元素，如果选中了其他元素，说明绑定事件的元素被上层元素遮挡，调整绑定事件元素的z-index或者设置position: relative即可解决
• 检查CSS指针事件配置：看绑定事件的元素或者其父元素是否设置了pointer-events: none，该属性会让元素完全不响应所有鼠标交互事件
• 检查事件名拼写：React的事件采用驼峰命名，确认写的是onClick而非原生HTML的全小写onclick
• 检查上层事件是否阻止冒泡：看父级元素是否绑定了点击事件，且执行了e.stopPropagation()阻止了事件冒泡
• 校验点击区域是否正确：给绑定事件的元素临时添加border: 2px solid red的样式，确认你点击的范围确实在元素的可视区域内
• 检查元素交互状态：确认元素没有设置opacity: 0、visibility: hidden等会让元素不可交互的样式

内容的提问来源于stack exchange，提问作者user16884208