React中点击事件如何获取锚点标签的className列表？

方法一：使用e.currentTarget（推荐） #

currentTarget始终指向绑定了点击事件的元素（也就是你的<a>标签），无论实际点击的是它本身还是子元素。修改你的点击处理函数：

const handleClick = (e) => {
    let kind = '';
    // 直接获取绑定事件的<a>标签的classList
    const anchorClassList = e.currentTarget.classList;
    console.log(anchorClassList);
    
    // 检查是否包含指定类名，示例：检查'set_process'
    const hasTargetClass = anchorClassList.contains('set_process');
    console.log(hasTargetClass);
}

方法二：使用Element.closest() #

如果需要从触发事件的子元素向上查找最近的<a>标签，可以用closest()方法，它会返回匹配选择器的最近祖先元素（包括自身）：

const handleClick = (e) => {
    let kind = '';
    // 查找最近的<a>元素
    const anchorElement = e.target.closest('a');
    if (anchorElement) {
        console.log(anchorElement.classList);
        const hasTargetClass = anchorElement.classList.contains('set_process');
        console.log(hasTargetClass);
    }
}

原因说明 #

• e.target是实际触发点击的DOM元素：点击<span>时它指向<span>，点击<a>空白区域时指向<a>，所以直接用target拿不到父元素的classList。
• e.currentTarget是事件绑定的元素，始终指向绑定onClick的<a>，是最可靠的方式。

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