React中ContactBlock组件onClick失效，点击触发父元素list_chat问题

算力阿峰

2026-7-7

解决ContactBlock组件点击事件被父元素拦截的问题

问题核心是事件冒泡：点击ContactBlock时，点击事件会沿着DOM树向上传播，触发父元素#list_chat的点击事件，导致子组件的点击逻辑无法正常执行。另外你的代码里handleClick的日志输出还漏传了username参数，一起修复。

修复步骤

1. 修改点击处理函数，阻止事件冒泡

在handleClick中接收事件对象，调用stopPropagation()阻止事件向上传播，同时补全日志参数：

function ContactBlock({ receiver, username, displayName, password, profilePic, time, lastmessage}) {
  const handleClick = (event) => {
    event.stopPropagation(); // 阻止事件冒泡到父元素
    console.log(`Clicked on contact with username:`, username);
    // 在这里添加选中聊天后的响应逻辑，比如切换聊天窗口内容
  };

2. 确保组件根元素正确绑定点击事件

返回的根div直接绑定handleClick即可，React会自动传递事件对象：

return (
    <div className="block" id="contact_block" onClick={handleClick}>
      <div className="imgbx">
        <img src={profilePic} alt="not found" className="cover" />
      </div>
      <div className="details">
        <div className="listhead">
          <h4>{displayName}</h4>
          <p className="time">{time}</p>
        </div>
        <div className="message_p">
          <p>{lastmessage}</p>
        </div>
      </div>
    </div>
  );
}

export default ContactBlock;