typescript React/JS -使整个div可点击，但如果用户点击子元素，则防止传播

pkwftd7m 于 2023-06-24 发布在 TypeScript

关注(0)|答案(1)|浏览(165)

我有一个父div，它的功能就像一张卡片，里面包含了像图像、文本和锚链接这样的子元素。
我希望整个div都是可点击的，但也允许用户点击div中的特定链接。
现在我使用onClick作为整个div，并使用Link（React Router）作为子元素。但是，当用户单击Link时，它会同时触发Link和div。
我试着在Link到stopPropagation中添加一个onClick方法，但onClick方法从未被触发。有什么办法可以解决这个问题吗？

interface Props {
  children?: any;
  onClick: () => void;
}

function CardDiv(props: Props) {
  return (
    <div
      onClick={props.onClick}
    >
      {props.children}
    </div>
  );
}

export default CardDiv;

<CardDiv
  className="Card__main"
  onClick={() => {
    console.log("PARENT");
  }}
>
  <Link
    to="https://www.example.com/"
    onClick={(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) =>
      console.log("CHILD");
      event.stopPropagation();
    }
  >
    <b>{props.title}</b>
  </Link>
</CardDiv>

Link中的click方法永远不会被调用。当我点击链接时，它会把我带到url，并触发父onClick方法。

typescript

来源：https://stackoverflow.com/questions/76487285/react-js-make-entire-div-clickable-but-prevent-propagation-if-user-clicks-on-c

1条答案

按热度按时间

wswtfjt71#

是的，这可以通过有条件地执行onClick函数来轻松实现。例如，考虑下面一个更简单的示例：

const handleDivClick = (event) => {
    if (event.target.className === "new") {
        // Clicked on a link within the div, don't trigger the div's onClick
        console.log("I was clicked");
        return;
    }

    // Handle the click on the whole div
    console.log("Div clicked");
};

return (
    <>
            <div onClick={handleDivClick} style={{ border: "2px solid black" }}>
            <h2>Card Title</h2>
            <p>Card content goes here.</p>
            <div className="new">new link</div>
        </div>
    </>
);

更详细地描述您的代码，我们可以通过设置一些类或id链接来实现这一点，尝试一下

<CardDiv
  className="Card__main"
  onClick={(event) => {
    if(event.target.id==='link')
        return;
    console.log("PARENT");
  }}
>
  <img src="img">whatever</img>
  <Link
    id='link'
    to={link}
  >
    <b>{props.title}</b>
  </Link>
</CardDiv>

赞(0）回复(0）举报 2023-06-24

我来回答

typescript React/JS -使整个div可点击，但如果用户点击子元素，则防止传播

1条答案

相关问题

热门标签

最新问答