Reactjs - 点击页面外任意位置的下拉菜单，而不是单击图标

Question

我有一个React js App（请不要JQuery）下拉菜单，当我点击▼字符时我会触发它。使用下面的代码，只有再次单击相同的▼时，下拉菜单才会消失。当用户点击页面上的任何其他位置时，我想让它消失。当用户点击页面上的任何其他位置而不是单击相同的图标▼时，如何更改下面的代码以使下拉菜单消失？

Toggler图标：

      <span className="show_more" onClick={this.toggleOptions}>
        <MaterialIcon icon="keyboard_arrow_down" />
      </span>

切换代码:(由许多组件使用，因此修复只能在这里吗？）

import React, { Component } from 'react'
...
import MaterialIcon from '../icons/material-icon'
import HeaderLogo from './logo'

export default class Header extends Component {
  state = {
    showOptions: false,
  }

  toggleOptions = () => this.setState({ showOptions: !this.state.showOptions })

  render() {
    let { showOptions } = this.state

    return (
      <div className="header">
        <div className="row-container container">
          <div className="col-l">
            <HeaderLogo />
          </div>
          <div className="col-m">
            <Search />
          </div>
          <div className="col-r">
            <div className="header_right">
              <HeaderTopLinks />
              <span className="show_more" onClick={this.toggleOptions}>
                <MaterialIcon icon="keyboard_arrow_down" />
              </span>
            </div>

            {showOptions ? (
              <HeaderOptions toggleOptions={this.toggleOptions} />
            ) : null}
          </div>
        </div>
      </div>
    )
  }
}

Answer 1

The answer can be found here

但总结一下，你必须听取文档的点击，然后编写一个能够遍历树的函数，并告诉你是否在组件内部或外部发生了点击

以下是该链接中要添加到组件的重要位：

  handleClickOutside(event) {
    if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {
      alert('You clicked outside of me!');
      this.setState({ showOptions: false });
    }
  }

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

  componentWillUnmount() {
    document.removeEventListener('mousedown', this.handleClickOutside);
  }

  render() {
    let { showOptions } = this.state;

    return <div className="header" ref={(node) => this.setWrapperRef = node}>...all the rest of the component goes here...</div>;
  }

为了记录，有很多方法可以实现这一点，这只是一种方法。