React Modal 仅在我单击背景或关闭图标时关闭？

Question

Here is a codepenhttps://codesandbox.io/s/amazing-morning-ukxp2?file=/src/App.js

So I created this modal and I wrapped it with a Background styled component, but I can't figure out how to get the close function to only work if I only click the background or the close icon.

Right now my entire modal is wrapped with this background so no matter where I click it always closes. I only want it to close if I click on the Background or the CloseModalButton , but not when I click on my actual modal.

Here is my code below

      export const Modal = ({ showModal, setShowModal }) => {
        const animation = useSpring({
          opacity: showModal ? 1 : 0,
          transform: showModal ? `translateY(0%)` : `translateY(-200%)`
        });

        return (
          <>
            {showModal ? (
              <Background onClick={() => setShowModal(!showModal)}>
                <animated.div style={animation}>
                  <ModalWrapper showModal={showModal}>
                    <div>hi</div>
                    <CloseModalButton
                      aria-label='Close modal'
                      onClick={() => setShowModal(!showModal)}
                    />
                  </ModalWrapper>
                </animated.div>
              </Background>
            ) : null}
          </>
        );
      };

Then here is my App.js with the function to open and close the modal

    function App() {
      const [showModal, setShowModal] = useState(false);

      const openModal = () => {
        setShowModal(!showModal);
      };

      return (
        <Container>
          <Button onClick={openModal}>Aye what's good</Button>
          <Modal showModal={showModal} setShowModal={setShowModal} />
          <GlobalStyle />
        </Container>
      );
    }

The main issue is the Background wraps my entire modal, so I need a way to only trigger my close function if the target is the actually background or the X icon, but not the actual modal itself (which is wrapped inside of the background)

Answer 1

You need to track event.target which gives where is has been called ie

const closeModal = (event) => {
    const modal = document.getElementById("myModal");
    if (event.target === modal) {
      setShowModal(false);
    }
  };
<Background id="myModal" onClick={closeModal}>

Here is the demo: https://codesandbox.io/s/cranky-hodgkin-o77em?file=/src/components/Modal.js

Answer 2

The problem is due to event bubbling. Everytime you click any descendants of the Background element, the click handlers of them fires and bubbles up until it reaches the Background element firing the handler of itself. To solve this, you can either stop the propagation of the click handler of the child elements using stopPropagation() method or you can simply add ID to background and determine if the id matches the background only then firing the showModal method.

<Background onClick={closeModal} id="bg">

const closeModal = (e) => {
    if (e.target.id === 'bg') {
      setShowModal(false);
    }
  };

It is not necessary to add id to the close button and check for the targeted button's id since clicking on the button definitely closes the modal.

Answer 3

I seen an comment asking how to achieve this with useRef (included typescript types):

const modalBackgroundRef = useRef<HTMLDivElement>(null);

const closeModal = () => {
    // Close the modal...
};

const onClickBackground = (event: MouseEvent<HTMLDivElement>) => {
    if (event.target === modalBackgroundRef.current) closeModal();
};

return (
    <div id="modal-background" tabIndex={-1} ref={modalBackgroundRef} onClick={onClickBackground}>
          // Modal goes here...
    </div>
);