如何在div内部启动onClick函数

Question

如果您能帮助我，我将不胜感激。我只是想建立一个聊天页面，我可以像在 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;

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

Answer 1

当您单击 ContactBlock 时，事件可能会传播到 id 为

list_chat

的父级 div。

在

event.stopPropagation()

中添加

handleClick

以防止这种行为。

const handleClick = (event) => {
  event.stopPropagation();
  console.log(`Clicked on contact with username: ${username}`);
};