所以基本上，你想做一张卡片，当点击它时，它会显示一个模态！
对于NextUI文档，您甚至不需要使用任何状态来处理Modal的打开和关闭。

const { isOpen, onOpen, onOpenChange } = useDisclosure();

字符串
看第一个例子：https://nextui.org/docs/components/modal#usage
他们提供了一个钩子，可以处理所有这些状态。你只需要在你的Card组件上设置它们。Card有isPressable属性，你传递

<Card onPress={onOpen} isPressable={true} >

型

• 是的，你应该保持组件打开模态一起与模态，否则你必须通过 prop ，这使它不必要的困难。
• 相反，将它们放在一起，并使用useDisclosure()钩子处理打开/关闭。
  下面是我做的一个组件：
  *PressableCard.js 导入页面使用 *

'use client'
import React from 'react'
import { Button, Card, CardBody, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, useDisclosure } from "@nextui-org/react";
const PressableCard = () => {

    const { isOpen, onOpen, onOpenChange } = useDisclosure();

    console.log("isOpen : ", isOpen);

    return (
        <>
            <Card onPress={onOpen} isPressable={true} >
                {/* PASS  onOpen TO onPress EVENT LISTENER*/}
                <CardBody>
                    <p>CLICK THIS CARD !!</p>
                </CardBody>
            </Card>
            <Modal isOpen={isOpen} onOpenChange={onOpenChange} isDismissable={false}>
                {/* PASS isOpen STATE FROM  useDisclosure HOOK*/}
                <ModalContent>

                    {(onClose) => (
                        <>
                            <ModalHeader >MODAL HEADER</ModalHeader>
                            <ModalBody>
                                <p>
                                    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita, officiis?
                                </p>

                            </ModalBody>
                            <ModalFooter>
                                <Button color="danger" variant="light"
                                    onPress={onClose}>
                                    {/* PASS  onClose FUNCTION TO onPress EVENT LISTENER*/}
                                    CLOSE
                                </Button>
                                <Button color="success" variant="light"
                                    onPress={onClose}>
                                    {/* PASS  onClose OR ANY OTHER FUNCTION TO onPress EVENT LISTENER*/}
                                    ACCEPT
                                </Button>
                            </ModalFooter>
                        </>
                    )}
                </ModalContent>
            </Modal>
        </>
    )
}

export default PressableCard

型

说明：

“use client”，因为这些组件无法在服务器端呈现，因为它使用事件。请删除“use client”并阅读错误。
我将Card和Modal放在一起，传递这些状态/值和函数const { isOpen, onOpen, onOpenChange } = useDisclosure();

卡片：

使卡可按下并在其onPress事件上传递函数：

isPressable={true}
onPress={onOpen}

型

Modal：

模态基于以下因素打开/关闭

isOpen={isOpen}

型
所以Modal的isOpen = isOpen来自useDisclosure。
类似地，来自useDisclosure的Modal的onOpenChange={onOpenChange}。

• 要了解有关useDisclosure()的更多信息，请在代码编辑器中选择useDisclosure()并按F12，它将显示它返回的函数和值。
• 我也有console logged isOpen状态/值，so when you click卡上你可以see it change in console.
• 您也可以阅读：*
• Modal Props：https://nextui.org/docs/components/modal#modal-props
• 卡 prop ：https://nextui.org/docs/components/card#modal-props
• 服务器组件：https://nextjs.org/docs/app/building-your-application/rendering/server-components
• 客户端组件：https://nextjs.org/docs/app/building-your-application/rendering/client-components
• 何时使用服务器和客户端组件：https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#when-to-use-server-and-client-components
  如果有什么我遗漏了，错过了，请留下评论。我会编辑这个答案。