React中父div的onClick被子元素触发，如何过滤指定子元素？

你的问题核心有两个：一是事件冒泡导致点击子元素也触发父元素的点击事件（其实这是你需要的，因为点击卡片任意区域都应该触发选中）；二是直接操作DOM的方式不符合React状态管理逻辑，会导致后续多选功能难以维护。

正确的做法是用React状态管理选中项，完全避免直接操作DOM：

1. 将状态改为多选集合：用数组存储所有选中的事件ID，支持多选切换
2. 通过状态控制类名：根据当前事件ID是否在选中数组中，动态给.date元素添加selected-event类
3. 统一处理点击事件：点击卡片任意区域（包括子元素）都触发选中状态切换，利用事件冒泡的特性，不需要额外阻止

完整代码示例 #

import { useState } from "react";
import events from "../utils/events.js";
import "../styles/events.scss";

const Events = () => {
  // 初始化选中第一个事件，用数组存储选中ID支持多选
  const [selectedIds, setSelectedIds] = useState([events[0].id]);

  // 处理卡片点击，切换选中状态
  const toggleEventSelection = (eventId) => {
    setSelectedIds(prevSelected => {
      if (prevSelected.includes(eventId)) {
        // 已选中则移除
        return prevSelected.filter(id => id !== eventId);
      } else {
        // 未选中则添加
        return [...prevSelected, eventId];
      }
    });
  };

  return (
    <div className="events-container">
      <div className="events">
        <div className="events-cards">
          {events.map((event) => (
            <div
              key={event.id}
              className="event"
              onClick={() => toggleEventSelection(event.id)}
            >
              {/* 根据状态动态添加选中类 */}
              <p className={`date ${selectedIds.includes(event.id) ? 'selected-event' : ''}`}>
                {event.date}
              </p>
              <h1 className="name">{event.name}</h1>
              <p className="description">{event.description}</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default Events;

关键说明 #

• 不再直接操作DOM：所有视图变化由selectedIds状态驱动，符合React单向数据流原则，避免状态与DOM不一致的问题
• 利用事件冒泡：点击卡片内任意子元素，事件都会冒泡到父级.event元素的onClick，实现点击卡片任意区域都能切换选中状态
• 天然支持多选：通过数组存储选中ID，后续可以轻松扩展全选、反选等功能

内容的提问来源于stack exchange，提问作者Alin-Alexandru Peter