如何在轮播中修复要与之交互的按钮？

如何解决如何在轮播中修复要与之交互的按钮？

当我尝试将图层/按钮导入其中一张卡片时，它不允许单击或与之交互。我相信问题出在轮播上。我有什么方法可以解决这个问题？ “CenterLayer”应该充当按钮，并且是我遇到问题的按钮。当我放置此代码时，图层作为页脚出现在卡片上，但不允许单击。请问有人可以帮我吗？

import React from "react";
import {
  Card,CardHeader,CardBody,CardFooter,Box,Image,heading,Carousel,grommet,Calendar,Text,} from "grommet";
import {CenterLayer} from "./EventsButton";

import { MainFooter } from "../Footer/Footer";


const Card0 = () => (
  <Card pad="large" background="dark-1" gap="medium">
   <CardHeader>
   <Box height="small" width="small">
   <Image src="./images/Photo.jpg" />
   </Box>
   </CardHeader>
   <CardBody>The Stranahan High School Graduation</CardBody>
   <Box direction="row" round gap="xlarge">
   <CardFooter>
   3/25/2021
   </CardFooter>
   <CardFooter>
   <CenterLayer />
   </CardFooter>
    </Box>
          
  </Card>
);

const Card1 = () => (
<Card pad="large" background="dark-1" gap="medium">
<CardHeader>
 <Box height="small" width="small">
  <Image src="./images/Photo.jpg" />
</Box>
</CardHeader>
<CardBody>Card1 The Stranahan High School Graduation</CardBody>
<CardFooter>Footer</CardFooter>
</Card>
);

const Card2 = () => (
<Card pad="large" background="dark-1" gap="medium">
<CardHeader>
<Box height="small" width="small">
<Image src="./images/Photo.jpg" />{" "}
</Box>
</CardHeader>
<CardBody>Card2 The Stranahan High School Graduation</CardBody>
<CardFooter>Footer</CardFooter>
</Card>
);


const Events = () => (
<grommet>
    
<heading textAlign="center" size="large" alignSelf="center" level="2" margin={{ left: "xlarge",top: "large",}}>Upcoming Events</heading>
<Carousel>
<Box direction="row" pad="large" round gap="small">
<Card0 />
<Card1 />
<Card2 />
</Box>
<Box direction="row" pad="large" round gap="small">
<Card1 />
<Card0 />
<Card2 />
</Box>
<Box direction="row" pad="large" round gap="small">
<Card2 />
<Card1 />
<Card0 />
</Box>
<Box direction="row" pad="large" round gap="small">
<Card1 />
<Card0 />
<Card2 />
</Box>
</Carousel>

<heading textAlign="center" size="large" alignSelf="center" level="2" margin={{ left: "xlarge",}}>Past Events</heading>
<Carousel>
<Box direction="row" pad="large" round gap="small">
<Card0 />
<Card1 />
<Card2 />
</Box>
<Box direction="row" pad="large" round gap="small">
<Card1 />
<Card0 />
<Card2 />
</Box>
<Box direction="row" pad="large" round gap="small">
<Card2 />
<Card1 />
<Card0 />
</Box>
<Box direction="row" pad="large" round gap="small">
 <Card1 />
<Card0 />
<Card2 />
</Box>
</Carousel>

    
<Box direction="row" pad="xlarge" round gap="xlarge">
<Box height="medium" width="medium" margin={{left: "xlarge"}}>
<Calendar fill daysOfWeek />
</Box>
<Box margin={{left: "xlarge",top:"large"}}>
<Card background={'orange'} >
<CardBody height="medium" width="medium" margin={{right: "medium",bottom: "medium",left: "medium",top: "medium"}}> 
<Text>At SEEF we take every opportunity to help the Stranahan community. We hope that our impact will lead others to do the same.</Text>
</CardBody>
</Card>
</Box>
</Box>  
< MainFooter />


</grommet>

);



export default Events

import React from 'react';

import { Add } from 'grommet-icons';

import { Box,Button,Layer,Select,Text } from 'grommet';
import { grommet } from 'grommet/themes';

export const CenterLayer = () => {
const [open,setopen] = React.useState();
const onopen = () => setopen(true);
const onClose = () => setopen(undefined);



return (
    <grommet theme={grommet} >
    <Box fill align="center" justify="center">
        <Button
        icon={<Add />}
        label={
            <Text>
            <strong>More information</strong>
            </Text>
        }
        onClick={onopen}
        plain
        />
    </Box>
    {open && (
        <Layer position="center" onClickOutside={onClose} onesc={onClose}>
        <Box pad="medium" gap="small" width="medium">
            <heading level={3} margin="none">
            The Stranahan High School Graduation
            </heading>
            <Text>This event will be taken place at City Hall in Fort LauderDale</Text>
            <Text>This event will be taken place on 3/25/2021 at 3:00PM</Text>
            <Box
            as="footer"
            gap="small"
            direction="row"
            align="center"
            justify="end"
            pad={{ top: 'medium',bottom: 'small' }}
            >
            
            <Button
                label={
                <Text color="white">
                    <strong>Close</strong>
                </Text>
                }
                onClick={onClose}
                primary
                color="status-critical"
            />
            </Box>
        </Box>
        </Layer>
    )}

    </grommet>
);
};

CenterLayer.storyName = 'Center';

CenterLayer.parameters = {
chromatic: { disable: true },};

export default {
title: 'EventsButton',};

解决方法

Carousel 是一个交互式元素，即它有自己的焦点和导航行为，出于 UX 和可访问性的原因，您不应将嵌套的交互式元素放在彼此内部，因此我会尽量避免在卡，在旋转木马内。

话虽如此，您放置在卡片中的按钮位于 Carousel 的“后面”，因此向上移动其 z-index 可以解决问题。 将此样式添加到卡片中，它应该可以实现

<Card style={{ zIndex: "100" }} ... >

我选择了 100 作为随机数，您可以根据您的应用行为将其缩小。