时间戳

首页 > 解决方案 > 禁止按钮单击父元素

javascript - 禁止按钮单击父元素

问题描述

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

这是一段代码：

<CardActionArea href={`/${item.name}`}>
  <Card key={index}>
    <CardHeader
      action={
        <Fab color="secondary" onClick={handleClick}>
          <EditIcon color={"primary"} />
        </Fab>
      }
    />

    <CardContent className={classes.cardContent}>
      <Avatar className={classes.avatar} alt={item.name} src={item.avatar} />
      <Typography variant="h6" color="textSecondary">
        Card description
      </Typography>
    </CardContent>
  </Card>
</CardActionArea>

我怎么能做到这一点？

标签： javascriptreactjsmaterial-uireact-material

解决方案

在卡片组件中，您可以创建单击卡片和内部按钮时要运行的两个功能：

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>
}

推荐阅读