Невозможно использовать два модальных окна на одной странице с помощью useDisclosure () в ChakraUI

В 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/>

Теперь я хочу сделать еще один модальный (скажем, reportModal) на той же странице. Для этого я написал тот же код, в котором переименовал переменные при деструктуризации useDisclosure ().

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

Кроме того, я использовал тот же поток, передав эти переименованные переменные в компонент и, но id не работал.

Кто-нибудь за ее решение? Заранее благодарим ...


reactjs javascript next.js chakra-ui
person Ibad Shaikh    schedule 22.01.2021    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Вы должны переименовать переменные вот так.

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

Теперь это должно сработать. То, что вы пробовали, снова похоже на деструктуризацию. Что неверно.

person Praveenkumar    schedule 22.01.2021