javascript 我如何显示一个模态框页面加载使用脉轮用户界面?

3htmauhk  于 2023-01-19  发布在  Java
关注(0)|答案(2)|浏览(155)

我如何显示一个模态框页面加载使用脉轮用户界面?
我试着在脉轮的文档中找到这些信息,但没有成功。

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>
        </>
    )
}
jdzmm42g

jdzmm42g1#

您可以将defaultIsOpen属性传递给useDisclosure挂钩,以设置isOpen的默认值。
将该属性设置为true以在页面加载时打开模态。

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

ht4b089n2#

juliomalves提到的解决方案正在工作(顺便感谢),但是默认情况下它只在第一次打开。
假设我有下面的代码,它只会在第一次显示,但我想在每次进入按钮单击方法时打开对话框:

if (remainingTries <= 0) {
            console.log('remaining balance is: ', remainingTries);
            setLoading(false);
            setModalVisible(true);
            return;
        }

其中:

{modalVisible && (
            <ModalDialog />
        )}

模态对话框位于不同的组件中,我在其中设置:

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

    return (
        <>
            <Modal closeOnOverlayClick={false} isOpen={isOpen} onClose={onClose}>

使用这段代码,当我点击按钮,它会检查剩余的尝试,如果0(或负),它会显示模态。但当我关闭模态,并再次点击按钮,它不会打开模态。有人有一个解决方案吗?(抱歉,我没有直接回复juliomalves,但显然我需要更多的声誉回复/评论)。

相关问题