reactjs - 如何在React组件外部捕获点击

我开始学习react，并尝试实现一个模式窗口。我同时使用打字本。
我想捕获react组件外部的一个点击，所以当我在模态窗口外部点击时，这个会关闭。我的方法是这样的：How to capture click outside React component

import styled from 'styled-components';

const StyledModal = styled.div`
  width: 100%;
  background-color: #fff;
  box-shadow: 0 0 0.625rem, rgba(0, 0, 0, 0.2);

  @media (min-width: 576px) {
    width: 32rem;
  },
`;

class Modal extends React.Component<ModalProps> {
    private modal: HTMLDivElement;

    onOutsideClick = (e: any) => {
      if (!_.isNil(this.modal)) {
        if (!this.modal.contains(e.target)) {
          this.onClose(e);
        }
      }
    }

    componentDidMount() {
      document.addEventListener('mousedown', this.onOutsideClick, false);
    }

    componentWillMount() {
      document.removeEventListener('mousedown', this.onOutsideClick, false);
    }

    render() {
        <div>
            <StyledModal ref={(node: any) => { this.modal = node; }}>
            ...
            </StyledModal>
        </div>
    }
}

问题是每当我在模式内或模式外单击时，我都会得到这个错误，我不知道它是什么，也不知道如何修复它：

任何灯光请让我知道…

最佳答案

因为styledModel是styled-components所以需要添加innerref才能获得dom节点。请记住，innerref是一个自定义道具，仅适用于styled-components
https://github.com/styled-components/styled-components/blob/master/docs/tips-and-tricks.md#refs-to-dom-nodes

<StyledModal innerRef={(node: any) => { this.modal = node; }}>
  ...
</StyledModal>