0

我想知道如何在 CardActionArea 上方放置一个对象。例如，如果我在 CardActionArea 顶部有一个按钮，并且单击该按钮，则 CardAction 和 Button 操作将同时执行。我想这样做，如果我点击按钮，它只执行按钮动作，而如果点击卡片上的其他任何地方，它将执行 CardAction。

示例：请参见此处的图片

整张卡片都是可点击的，但是，例如，当点击删除按钮（标记为绿色圆圈）时，它会同时激活 CardAction 和按钮（删除）操作。

<CardActionArea onClick={() => setConnectionVisible(true)}>
    <CardContent>
        <Grid container spacing={3}>
            { /* Other unimportant code */ }
            <Grid item xs={2} style={{ zIndex: 1000 }}>
                <Button isSecondary css={tw`mr-2`} onClick={() => setConnectionVisible(true)}>
                    <FontAwesomeIcon icon={faEye} fixedWidth/>
                </Button>
                <Can action={'database.delete'}>
                    <Button color={'red'} isSecondary onClick={() => setVisible(true)}>
                        <FontAwesomeIcon icon={faTrashAlt} fixedWidth/>
                    </Button>
                </Can>
            </Grid>
        </Grid>
    </CardContent>
</CardActionArea>

谢谢！

4

1 回答 1

0

关于动作。您只需要在按钮处理程序处停止事件传播。这将阻止您的CardActionAreaonClick 被调用。因此，请使用您的按钮处理程序之一：

 setConnectionVisible: function(e) {
    e.stopPropagation();

    // do connection stuff
  },

在事件处理程序的顶部应用e.stopPropagation();，这将阻止调用父级的 onClick CardActionArea。

于 2020-12-16T21:09:36.610 回答