Блог

У меня есть модальный компонент, в котором есть кнопка для открытия дочернего модального окна. Проблема в том, что когда я закрываю дочерний модальный, родительский модальный также закрывается. Я хотел бы иметь возможность закрывать дочерний модал только тогда, когда я нажимаю кнопку его закрытия. Я использую попутный ветер и безголовый ветер (https://headlessui.dev/) для модальных значений.

Вот кодовое поле, и код также приведен ниже: https://codesandbox.io/s/mystifying-jackson-3du6v

Я использую функции закрытия с разными именами и реквизиты с разными именами.

index.js

 export default function Home() {

    const [isOpen, setIsOpen] = useState(false)

    return (
        <div className="w-screen h-screen bg-gray-200">
            <button onClick={() => setIsOpen(true)} className="font-bold">open modal</button>
            <ParentModal isOpen={isOpen} setIsOpen={setIsOpen}/>
        </div>
    )
}
 

родительский модальный

 const ParentModal = ({ isOpen, setIsOpen }) => {

    const [childIsOpen, setChildIsOpen] = useState(false)

    function closeModal() {
        setIsOpen(false);
    }

    return (
        <>
        <Transition appear show={isOpen} as={Fragment}>
            <Dialog as="div" className="fixed inset-0 z-10 overflow-y-auto" onClose={closeModal}>
        ...
            </Dialog>
        </Transition>
        <ChildModal isChildOpen={childIsOpen} setIsChildOpen={setChildIsOpen} />
        </>
    )
}
 

дочерний модальный

 const ChildModal = ({ isChildOpen, setIsChildOpen }) => {

    function closeChildModal() {
        setIsChildOpen(false);
    }

    return (
        <Transition appear show={isChildOpen} as={Fragment}>
            <Dialog as="div" className="fixed inset-0 z-10 overflow-y-auto" onClose={closeChildModal}>
            ...
            </Dialog>
        </Transition>
    )
}
 

Большое спасибо, Мэтт