Question

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

我想在我的React组件外部捕获一个点击，所以当我在模态窗口外面点击时，这个关闭。我的方法基于此：How to Convert Selenium Scripts into the JMX Converter

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

问题是每当我点击模态内部或外部时我都会收到此错误，我不知道它是什么或如何解决它：

How to capture click outside React component

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

Answer 1

由于您的StyledModal为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>

Answer 2

从样式组件v4开始，它是ref道具。

constructor(props) {
  super(props);
  this.inputRef = React.createRef();
}

render() {
  return (
   <Input
      ref={this.inputRef}
    />
  );
}

有关更多信息，Refs

Answer 3

如果要使用此功能已经存在的很小的组件（466字节压缩），则可以签出该库react-outclick。它使您可以捕获组件外部的点击。

关于库的好处是它还使您可以检测组件外部和组件内部的点击。它还支持检测其他类型的事件。

如何捕获React组件外部的点击

3 个答案: