I am trying to build a dropdown menu. The base structure Test is where I need to detect clicks outside the content area using React ref and styled-components.

I have checked the related articles in SO but they use hooks not supported on my class component.

Here is the code:

import React from "react";

import PropTypes from "prop-types";

import styled, { ThemeProvider } from "styled-components";



import { theme } from "../theme";



import Icon from "../Icon";



const Container = styled.div`

  display: flex;

`};



const SelectorDiv = styled.div`

  background-color: black;

  color: white;

  height: 100px;

`;



class Test extends React.Component {

  componentDidMount () {

    document.addEventListener("mousedown", this.handleClickOutside);

  }



  componentWillUnmount () {

    document.removeEventListener("mousedown", this.handleClickOutside);

  }



  handleClickOutside = event => {

    console.log(this.refs); // undefined

  }





  handleClickInside = () => {

    alert("Clicked inside");

  }



  render = () => {



    return (

      <ThemeProvider theme={theme}>

        <Container disabled={disabled}>

          <SelectorDiv

            onClick={this.handleClickInside}

            ref={"wrapper"}

          >

            <h1>This is the content to click</h1>

          </SelectorDiv>

        </Container>

      </ThemeProvider>

    );

  };

}

export default Test;

The ref is not working property. When clicking outside the are I'm getting undefined on this.refs. Seens that styled-components had issues with this, but it was solved on V4 (I'm using V5.1.0).

How to get the wrapper component inside my handleOutsideClick?