Реагировать на раннее закрытие модального окна

Question

Я создал модальное окно в React, которое сейчас открывается. Однако независимо от того, где я щелкаю, будь то кнопка закрытия, модальное тело или фоновое наложение, модальное окно закрывается.

Первоначально я не передавал событие Syntheti c в свой обработчик. С тех пор я передал объект и попытался добавить stopPropagation(), nativeEvent.stopPropagation() и nativeEvent.stopImmediatePropagation(), но безрезультатно. Код ниже, дайте мне знать, что я напортачил.

Я использую стилизованные компоненты для этого проекта, поэтому обертывающие JSX-теги принадлежат стилизованным компонентам, которые я пропустил.

• Спасибо.

Родительский компонент

interface ParentProps {
    title: string;
    img: string;
    modalContent: JSX.Element;
}

function Parent(props: ParentProps) {

    const [modalize, setModalize] = useState(false);

    function toggleModal(event: SyntheticEvent) {
        setModalize(!modalize);
        event.stopPropagation();
        event.nativeEvent.stopPropagation();
    }

    return (
        <SkillBoxWrapper
            img={process.env.PUBLIC_URL + "/" + props.img}
            onClick={(e) => toggleModal(e)}
        >
            <BoxTitle className="title">{props.title}</BoxTitle>
            <Modal show={modalize} toggleModal={() => toggleModal}>{props.modalContent}</Modal>
        </SkillBoxWrapper>
    );
}

Модальный компонент

interface ModalProps {
    children: JSX.Element;
    toggleModal: (e: SyntheticEvent) => void;
    show: boolean;
}

function Modal(props: ModalProps) {
    return props.show
        ? (
            <ModalBackground>
                <ModalDisplayArea>
                    <button onClick={(e) => props.toggleModal(e)}>X</button>
                    <div className="modal-content">{props.children}</div>
                </ModalDisplayArea>
            </ModalBackground >
        )
        : null;
}

Answer 1

Ваше модальное окно находится в SkillBoxWrapper, который все еще слушает onClick, когда модальный показан, и, следовательно, переключает модальное окно. Вы можете заботиться только об открытии модального окна из SkillBoxWrapper, что решает проблему.

return (
        <SkillBoxWrapper
            img={process.env.PUBLIC_URL + "/" + props.img}
            onClick={(e) => { if(!modalize) toggleModal(e) } }
        >
            <BoxTitle className="title">{props.title}</BoxTitle>
            <Modal show={modalize} toggleModal={() => toggleModal()}>{props.modalContent}</Modal>
        </SkillBoxWrapper>
    );