无法在同一页面上使用 ChakraUI 中的 useDisclosure() 使用两个模式

Question

chakraUI 提供了一个自定义钩子 useDisclosure() returns isOpen, onClose, onOpen.

  const { isOpen, onOpen, onClose } = useDisclosure()

onOpen 传递给触发打开模式的按钮的 onClick。

<Modal isOpen={isOpen} onClose={onClose}>
  ...Modal Code...
<Modal/>

<Button onClick={onOpen}>
  button
<Button/>

现在我想在同一页面上制作另一个模式（比方说 reportModal）。为此，我编写了相同的代码，在解构 useDisclosure() 时重命名了变量。

const {
        isOpen: { isOpenReportModal },
        onOpen: { onOpenReportModal },
        onClose: { onCloseReportModal },
      } = useDisclosure()

此外，我通过将这些重命名的变量传递给组件来使用相同的流程，但 id 不起作用。

有人解决吗？提前致谢...

Answer 1

您必须像这样重命名变量。

 const { 
    isOpen: isOpenReportModal, 
    onOpen: onOpenReportModal, 
    onClose: onCloseReportModal 
} = useDisclosure()

现在应该可以了。您尝试过的就像再次解构一样。哪里错了。

无法在同一页面上使用 ChakraUI 中的 useDisclosure() 使用两个模式

Unable to use two modals on same page using useDisclosure() in ChakraUI

javascript

reactjs

next.js

chakra-ui