禁止按钮单击父元素

编程问答 2022-08-16

问题描述

我正在构建Material UI应用程序。我有一个卡片组件，需要使其可单击。但是，右上角还有一个按钮，可在点击时编辑卡片。问题是，当我单击该按钮时，它将处理2个操作：

  • 在按钮本身上调用的编辑操作
  • 点击卡片

这是一段代码：

$(".richtext").parent().css('width','100%');

我该如何实现？

解决方法

在卡片组件中，您创建了单击卡片和内部按钮时要运行的两个函数：

const onCardClick = () => {
  // your code here
}

const onButtonClick = () => {
  onCardClick()    
  // your code here
}

在 Card.jsx 中渲染卡片内的按钮时添加 onButtonClick 函数

<MyButton onClick={onButtonClick}

然后在你的按钮组件中，你给它一个 onClick 属性：

const MyButton = (props) => {
  <Button onClick={prop.onClick}>title</Button>
}
javascriptmaterial-uireact-materialreactjsreactjs