React 模态提前关闭

Question

I created a modal in React that is currently opening. However, no matter where I click, be it the close button, the modal body, or the background overlay, the modal closes.

I initially was not passing the Synthetic event into my handler. I have since passed in the object and tried adding stopPropagation() , nativeEvent.stopPropagation() , and nativeEvent.stopImmediatePropagation() to no avail. The code is below, let me know what I messed up.

I am using styled-components for this project, so the wrapping JSX tags belong to styled components which I ommitted.

• Thanks.

Parent Component

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>
    );
}

Modal Component

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

Your modal is within SkillBoxWrapper, which still listens to onClick when modal is shown and therefore toggles modal. You may only care for opening modal from SkillBoxWrapper, which solves the issue.

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>
    );