markdown 单击模态外部时关闭

Posted 2021-05-05

side note: Close when click outside of modal - [ref](https://medium.com/@francesco.agnoletto/how-to-use-react-context-to-create-a-modal-d8a387e09c28)

    class Modal extends Component {
      private modalRef = createRef;
    
      closeModal = (e) => {
        const { modalProps } = this.props;
        const node = this.modalRef.current;
        // ignore if click is inside the modal
        if (node && node.contains(e.target)) {
          return;
        }
    
        modalProps.hideModal();
      };
    
      componentDidMount() {
        document.addEventListener("mousedown", this.closeModal, false);
      }
    
      componentWillUnmount() {
        document.removeEventListener("mousedown", this.closeModal, false);
      }
    
      render() {
        const { modalProps, title, children } = this.props;
        return modalProps.show ? (
          <StyledModalOverlay>
            <StyledModal ref={this.modalRef}>
              <header>{title}</header>
              {children}
            </StyledModal>
          </StyledModalOverlay>
        ) : null;
      }
    }