如何将对象放置在 CardActionArea 上方

Question

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

Answer 1

关于行动。您只需在按钮处理程序处停止事件传播。这将阻止您的CardActionAreaonClick 被调用。因此，采用您的按钮处理程序之一：&nbsp;setConnectionVisible: function(e) {&nbsp; &nbsp; e.stopPropagation();&nbsp; &nbsp; // do connection stuff&nbsp; },应用事件处理程序顶部的 ，这将防止调用e.stopPropagation();父级上的 onClick 。CardActionArea