如何使用 Chakra UI 在页面加载时显示模式框？答案

【问题标题】：How do I show a modal box on page load using Chakra UI?如何使用 Chakra UI 在页面加载时显示模式框？
【发布时间】：2021-11-29 17:50:25
【问题描述】：

如何使用 Chakra UI 在页面加载时显示模式框？

我试图在 Chakra 的文档中找到这些信息，但没有成功。

import {
    useDisclosure,
    Modal,
    ModalOverlay,
    ModalContent,
    ModalCloseButton,
    ModalBody,
    Text,
} from "@chakra-ui/react"
            
export default function BasicUsage() {
    const { isOpen, onClose } = useDisclosure()
    
    return (
        <>
            <Modal isOpen={isOpen} onClose={onClose}>
                <ModalOverlay />
                <ModalContent>
                    <ModalCloseButton />
                    <ModalBody>
                        <Text>Hello</Text>
                    </ModalBody>
                </ModalContent>
            </Modal>
        </>
    )
}

【问题讨论】：

标签： javascript reactjs next.js chakra-ui

【解决方案1】：

您可以将defaultIsOpen 属性传递给useDisclosure 挂钩以设置isOpen 的默认值。

将该属性设置为 true 以在页面加载时打开模式。

const { isOpen, onClose } = useDisclosure({ defaultIsOpen: true })

【讨论】：

你摇滚！谢谢！