通过在反应中单击外部来关闭下拉列表

【问题标题】：Close dropdown by clicking outside in react通过在反应中单击外部来关闭下拉列表
【发布时间】：2021-06-01 13:40:38
【问题描述】：

我正在使用 react 下拉组件，我使用了语义库并自定义了下拉：

dropdown image description here

当我点击添加任务并且我想在点击外部或其他任何地方时关闭它时会出现此下拉菜单。

我的下拉菜单是这样的：

<Dropdown{...taskDropdownList}/>

【问题讨论】：

你能把这个属于哪个图书馆吗？ AFAIK 这不是香草反应组件

标签： reactjs react-hooks dropdown

【解决方案1】：

您的问题缺少必要的详细信息，因此我对您使用的库进行了最佳猜测。这在没有任何特殊逻辑的情况下按预期“onBlur”工作。

import "./styles.css";
import Dropdown from "react-dropdown";

export default function App() {
  return (
    <div className="App">
      <h1>Drop down example</h1>
      <Dropdown options={["matt", "alex"]} />
    </div>
  );
}

代码沙盒：https://codesandbox.io/s/cocky-wozniak-fn0do?file=/src/App.js

【讨论】：