如何在内部 div 元素中启动 onClick 函数

问：

我正在尝试构建一个聊天页面，我可以像在 WhatsApp 中一样添加用户，并让每个聊天的每次点击都会根据所选的聊天做出响应。

    <div id="list_chat">
      {contacts.map(contact => (
        <ContactBlock
          receiver={contact.receiver}
          username={contact.username}
          displayName={contact.displayName}
          password={contact.password}
          profilePic={contact.profilePic}
          time={contact.time}
          lastmessage={contact.lastmessage}
          key={contact.username}
        />
      ))}
    </div>

function ContactBlock({ receiver, username, displayName, password, profilePic, time, lastmessage}) {
  const handleClick = () => {
    console.log(`Clicked on contact with username:`,);
  };

  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;

我无法激活 onClick on ContactBlock，但它适用于“list_chat”div。 当我单击 ContactBlock 时，它指的是“list_chat”div。