如何将对象放置在 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 被调用。因此，采用您的按钮处理程序之一：

 setConnectionVisible: function(e) {

    e.stopPropagation();

    // do connection stuff

  },

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