Javascript Reactjs-切换下拉菜单单击页面上的任意位置，而不是只单击图标

我有一个React js应用程序（请不要JQuery）下拉菜单，当▼ 字符被单击。使用下面的代码，只有在相同的情况下，下拉菜单才会消失▼ 再次单击。我想让它在用户单击页面上的任何其他位置时消失。如何更改下面的代码，使下拉菜单在用户单击页面上其他任何位置时消失，而不仅仅是单击同一图标▼ ?

切换器图标：

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

切换代码：（由许多组件使用，因此修复程序只能在此处使用？）

import React，{Component}来自“React”
...
从“../icons/material icon”导入MaterialIcon
从“./logo”导入HeaderLogo
导出默认类头扩展组件{
状态={
showOptions:false，
}
toggleOptions=（）=>this.setState（{showOptions:！this.state.showOptions}）
render（）{
设{showOptions}=this.state
返回(
{显示选项(
)：null}
)
}
}

但总而言之，您必须倾听文档上的单击，并编写一个函数，该函数将遍历树并告诉您单击是发生在组件内部还是外部

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

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

handleClickOutside（事件）{
if（this.wrapperRef&&！this.wrapperRef.contains（event.target））{
警惕（“你在我之外点击了！”）；
this.setState（{showOptions:false}）；
}
}
componentDidMount（）{
document.addEventListener（'mousedown'，this.handleclickout）；
}
组件将卸载（）{
document.removeEventListener（'mousedown'，this.handleclickout）；
}
render（）{
设{showOptions}=this.state；
返回this.setWrapperRef=node}>…组件的所有其余部分都在这里。。。；
}

---

作为记录，实现这一点的方法有很多，这只是一种方法。

谢谢你，但我认为你的答案非常笼统。我发布了我的组件代码来帮助回答问题，我想看看如何通过修改切换组件而不是所有调用切换器的组件来实现这一点。我不知道你的意思。此代码不修改任何调用切换程序的组件。它只是确定用户是否在下拉列表之外单击，这是您请求帮助的内容。'Code for toggling（上图）'-这是切换下拉列表的代码。我要求修复该组件中可能存在的问题。如果没有，我将不得不修改许多调用此代码的组件。我不是说你的答案不起作用，但我认为这并没有使用我发布的代码。这是一个通用的答案。不，伙计，你把我提供的代码添加到你的组件中，它会解决你的问题。您不必将其添加到任何其他组件。好的，我将尝试一下。当我在报税表中丢失了一些东西时，上面的代码在哪里<代码>返回this.setWrapperRef=node}>下拉列表

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