React中onClick事件无法通过event.target访问子元素求助

你遇到的e.target.querySelector(...) is null错误，是因为e.target是实际被点击的元素——如果点击的是.checkBox子元素本身，它内部没有.checkBox类的元素，querySelector自然返回null。

1. 使用e.currentTarget替代e.target #

e.currentTarget始终指向绑定了点击事件的父元素（也就是.sortingBy），不管你点击的是父元素还是子元素，它都能稳定找到子元素：

const openFilter=(e)=>{
    e.currentTarget.querySelector('.checkBox').classList.toggle('active')
}

2. 用React Ref直接获取子元素（推荐） #

更符合React的开发模式，通过Ref直接绑定子元素，避免手动遍历DOM：

import { useRef } from 'react';

function YourComponent() {
    const checkBoxRef = useRef(null);

    const openFilter = () => {
        // 可选链避免null报错
        checkBoxRef.current?.classList.toggle('active');
    }

    return (
        <div className="sortingBy" onClick={openFilter}>
            <div className="checkBox" ref={checkBoxRef}></div>
        </div>
    );
}

3. 兼容点击父/子元素的判断逻辑 #

如果一定要用e.target，可以判断当前点击的元素是否是目标子元素，再做处理：

const openFilter=(e)=>{
    const checkBox = e.target.classList.contains('checkBox') 
        ? e.target 
        : e.target.querySelector('.checkBox');
    // 可选链防止找不到元素时报错
    checkBox?.classList.toggle('active');
}

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