如何使用 Chakra UI 关闭一个模态并打开另一个模态？

发布于 2025-01-09 11:08:10 字数 1605 浏览 2 评论 0原文

我有一个模态形式，我想使用多个模态。基本上，在第一个模式中，系统会询问用户一些信息。然后，按下“下一步”按钮后，第一个模式将关闭，第二个模式将打开并询问其他信息。我认为“下一步”按钮的“onClose”应该关闭第一个模式，然后打开下一个模式。但是，我似乎无法让它发挥作用。我

const { isOpen, onOpen, onClose } = useDisclosure()
const { isOpenSecond, onOpenSecond, onCloseSecond } = useDisclosure()

然后

<button onClick="{onOpen}">SIGN UP</button>
<Modal closeOnOverlayClick="{false}" isOpen="{isOpen}" onClose="{onClose}">
  <ModalOverlay />
  <ModalContent>
    <ModalHeader>Create an account</ModalHeader>
    <ModalCloseButton />
    <ModalBody>
      <Stack spacing="25px">
        //first part of the form
      </Stack>
    </ModalBody>
    <ModalFooter>
      <button colorScheme="blue" mr="{3}" onClick="{" onClose }>
        NEXT &#8594;
      </button>
    </ModalFooter>
  </ModalContent>
</Modal>
<Modal
  closeOnOverlayClick="{false}"
  isOpen="{isOpenSecond}"
  onClose="{onClose}"
>
  <ModalOverlay />
  <ModalContent>
    <ModalHeader>Test</ModalHeader>
    <ModalCloseButton />
    <ModalBody>
      <Stack spacing="25px">
        //second part of the form here
      </Stack>
    </ModalBody>
    <ModalFooter>
      <button colorScheme="blue" mr="{3}" onClick="{onClose}">
        NEXT &#8594;
      </button>
    </ModalFooter>
  </ModalContent>
</Modal>

如何使 onClose 关闭一个模式并打开另一个模式？另一个 onClose 完全关闭表单。

原文

I have a modal form which I'd like to be on multiple modals. Basically, in the first modal, the user is asked some information. Then, after pressing the button 'Next', the first modal closes and the second one opens asking other information. I figure the 'onClose' for the button 'Next' should close the first modal and then open the next. However, I can't seem to make it work.
I have

const { isOpen, onOpen, onClose } = useDisclosure()
const { isOpenSecond, onOpenSecond, onCloseSecond } = useDisclosure()

then

<button onClick="{onOpen}">SIGN UP</button>
<Modal closeOnOverlayClick="{false}" isOpen="{isOpen}" onClose="{onClose}">
  <ModalOverlay />
  <ModalContent>
    <ModalHeader>Create an account</ModalHeader>
    <ModalCloseButton />
    <ModalBody>
      <Stack spacing="25px">
        //first part of the form
      </Stack>
    </ModalBody>
    <ModalFooter>
      <button colorScheme="blue" mr="{3}" onClick="{" onClose }>
        NEXT →
      </button>
    </ModalFooter>
  </ModalContent>
</Modal>
<Modal
  closeOnOverlayClick="{false}"
  isOpen="{isOpenSecond}"
  onClose="{onClose}"
>
  <ModalOverlay />
  <ModalContent>
    <ModalHeader>Test</ModalHeader>
    <ModalCloseButton />
    <ModalBody>
      <Stack spacing="25px">
        //second part of the form here
      </Stack>
    </ModalBody>
    <ModalFooter>
      <button colorScheme="blue" mr="{3}" onClick="{onClose}">
        NEXT →
      </button>
    </ModalFooter>
  </ModalContent>
</Modal>

How can I make onClose close one modal and open another? And another onClose closes altogether the form.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

攀登最高峰 2025-01-16 11:08:10

你写错了

<button colorScheme="blue" mr="{3}" onClick="{" onClose }>

，我认为你需要这样的处理程序

const handleModal = () => {
Onclose,
OnOpenSecond
}

，并且你可以像这样添加

<button colorScheme="blue" mr="{3}" onClick="{() => handleModal()}">

我从不使用 chakra ui，如果代码错误，抱歉，但这就是我认为的逻辑

you typo on this

<button colorScheme="blue" mr="{3}" onClick="{" onClose }>

and i think you need handler like this

const handleModal = () => {
Onclose,
OnOpenSecond
}

and in view you can add like this

<button colorScheme="blue" mr="{3}" onClick="{() => handleModal()}">

i never use chakra ui, sorry if the code wrong, but that is the logic i think

回复收藏 0 原文

爱冒险 2025-01-16 11:08:10

我也有这个用例，所以我能够在盯着 PC 几个小时后实现它

I had this usecase too, so I was able to implement it after some hours staring at PC????

you can basically just use conditional statement in the function that would be called in your onClick event. for Example:

   const openSignUpModal = () => {
    onSignUpOpen()
    if (isLoginOpen) {
      onLoginClose()
    }
  }

where we have const { isOpen: isLoginOpen, onOpen: onLoginOpen, onClose: onLoginClose } = useDisclosure() and const { isOpen: isSignUpOpen, onOpen: onSignUpOpen, onClose: onSignUpClose } = useDisclosure()

in this case login can be the first while signup can be the second, vice versa.

回复收藏 0 原文

~没有更多了~