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

Question

我开始学习 React，我正在尝试实现一个模态窗口。我同时在使用 TypeScript。

我想在我的 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>
    }
}

问题是每当我在模式内部或外部单击时都会出现此错误，我不知道它是什么或如何修复它:

任何灯光请让我知道...

Answer 1

由于您的 StyledModal 是 styled-components，因此您需要添加 innerRef 才能获取 DOM 节点。请记住 innerRef 是一个自定义 Prop ，仅适用于 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>