React点击子元素时父元素绑定的onClick事件类名切换异常如何解决

问题原因 #

e.target 指向的是实际触发点击事件的最内层DOM节点，当你点击a标签内部的span元素时，e.target 是span节点，此时取e.target.parentElement 拿到的是a标签本身，而非你预期的a标签的父元素li，因此类名被错误添加到了a标签上。

可行解决方案 #

方案1：使用e.currentTarget获取事件绑定元素（最快修复）

e.currentTarget 永远指向绑定了当前点击事件处理函数的元素，也就是你绑定onClick的a标签，不管点击a标签内部的哪个子元素，取值都稳定。同时可以用classList.toggle 简化类名切换逻辑，无需手动写if else判断：

const handleClick = (e) => {
    const parentLi = e.currentTarget.parentElement;
    parentLi.classList.toggle('selected_category');
};

方案2：使用closest 方法向上查找目标节点（兼容性更强）

如果后续DOM结构有调整，比如a标签外额外嵌套了其他元素，parentElement 可能再次取错，可以用closest 直接匹配最近的li元素，不受层级影响：

const handleClick = (e) => {
    const parentLi = e.target.closest('li');
    parentLi.classList.toggle('selected_category');
};

方案3：React数据驱动写法（最佳实践）

React项目更推荐用状态控制类名，避免直接操作DOM，减少状态不同步的风险：

import { useState } from 'react';

export default myComponent = () => {
    // 动态列表可以替换为存储选中项的id
    const [selectedIndex, setSelectedIndex] = useState(null);

    const handleClick = (index) => {
        setSelectedIndex(prev => prev === index ? null : index);
    };

    return (
        <>
            <ul>
                <li className={selectedIndex === 0 ? 'selected_category' : ''}>
                    <a onClick={() => handleClick(0)}>
                        content<span className="text-gray-25 font-size-12 font-weight-normal">
                            121
                        </span>
                    </a>
                </li>
                <li className={selectedIndex === 1 ? 'selected_category' : ''}>
                    <a onClick={() => handleClick(1)}>
                        content<span className="text-gray-25 font-size-12 font-weight-normal">
                            121
                        </span>
                    </a>
                </li>
            </ul>
        </>
    );
}

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