React开发中点击子元素时如何为对应父div添加class类名

你可以直接通过事件对象获取对应的父DOM节点，用classListAPI追加类名，不会覆盖原有类，也不会误修改其他元素，修改后代码如下：

export default MainContent = () => {
    const handleClick = (e) => {
        // 定位当前点击子元素对应的父div，写法兼容子元素内部有嵌套节点的场景
        const parentDiv = e.target.closest('div').parentElement;
        // 如果需要排他效果（仅最近点击的父div保留类）保留下面这段，不需要可以直接删除
        document.querySelectorAll('.active-parent').forEach(el => {
            el.classList.remove('active-parent');
        });
        // 给当前匹配到的父div追加类名
        parentDiv.classList.add('active-parent');
    };

    return (
        <>
            <div>
                <div onClick={handleClick}>1</div>
            </div>
            <div>
                <div onClick={handleClick}>2</div>
            </div>
            <div>
                <div onClick={handleClick}>3</div>
            </div>
        </>
    );
}

补充说明：

• 用closest匹配子元素比直接取e.target.parentElement更稳妥，不会因为子元素内部后续新增嵌套节点导致父元素定位失效
• classList.add是类名追加操作，不会覆盖父元素原有类，你提到的setAttribute修改同一个元素的问题，本质是setAttribute会直接覆盖全量class属性，或者之前没有精准定位到对应父元素导致的，用classListAPI可以完全规避这个问题
• 本方案完全不需要调用useState，符合你的需求。

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