Widgets, such as a calendar or a time picker, are often displayed as popups in web pages, and it's expected behaviour that they will close if the user clicks on the screen outside the widget. However, it's not immediately obvious how to manage this when using React, since code is split into declarative components which don't know about any other components.

To detect clicks outside a component in React, you'll need to add a 'click' event listener to the document in the component's 'mount' handler; the listener calls a function which uses ReactDOM to check whether the component contains the element which has just been clicked upon.

Code is simpler to understand:

import React from 'react';
  import ReactDOM from 'react-dom';

  class CalendarPopup extends React.Component {

  componentWillMount() {
    // add event listener for clicks
    document.addEventListener('click', this.handleClick, false);
  }

  componentWillUnmount() {
    // make sure you remove the listener when the component is destroyed
    document.removeEventListener('click', this.handleClick, false);
  }

  // fat arrow function binds 'this' to class when called by the listener
  // otherwise you'd need 'this.handleClick.bind(this)' in the constructor
  handleClick = e => {
    // this is the key part - ReactDOM.findDOMNode(this) gives you a reference
    // to your CalendarPopup component;
    // e.target is the element which was clicked upon.
    // check whether the element clicked upon is in your component - if not,
    // then call the close logic
    if(!ReactDOM.findDOMNode(this).contains(e.target)) {
      // the click was outside your component, so handle closing here
    }
  }
}