next.js 无法使用ChakraUI中的useDisclosure()在同一页面上使用两个模态

egmofgnx 于 2023-08-04 发布在其他

关注(0)|答案(2)|浏览(104)

chakraUI提供了一个自定义钩子useDisclosure（），它返回 * isOpen，onClose，onOpen *。

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

字符串
将onOpen传递给按钮的onClick，触发该按钮打开模态。

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

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

型
现在我想在同一个页面上创建另一个modal（比如reportModal）。为此，我编写了相同的代码，在解构useDisclosure（）时重命名变量。

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

型
此外，我使用了相同的流程，将这些重命名的变量传递给和component，但id不起作用。
有人想解决吗？先谢谢你…

next.js

来源：https://stackoverflow.com/questions/65841926/unable-to-use-two-modals-on-same-page-using-usedisclosure-in-chakraui

2条答案

按热度按时间

gt0wga4j1#

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

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

字符串
现在这个应该可以了。你所做的就像是再次破坏。这是错误的。

赞(0）回复(0）举报 2023-08-04

yk9xbfzb2#

我使用以下方法，这比重组更好。

function MyApp() {
  const modal1 = useDisclosure()
  const modal2 = useDisclosure()
  
  return (
    <>
      <Button onClick={modal1.onOpen}>Open Modal 1</Button>
      <Button onClick={modal2.onOpen}>Open Modal 2</Button>

      <Modal isOpen={modal1.isOpen} onClose={modal1.onClose}>
        // modal body
      </Modal>
      
      <Modal isOpen={modal2.isOpen} onClose={modal2.onClose}>
        // modal body
      </Modal>
    </>
  )
}

字符串
来源

赞(0）回复(0）举报 2023-08-04

我来回答

next.js 无法使用ChakraUI中的useDisclosure()在同一页面上使用两个模态

2条答案

相关问题

热门标签

最新问答