失去焦点时反应隐藏下拉菜单答案

【问题标题】：React hide dropdown menu when lose focus失去焦点时反应隐藏下拉菜单
【发布时间】：2020-07-01 16:54:00
【问题描述】：

我正在 YouTube 上关注 Fireship 的 Advanced Dropdown Menu 视频。完成视频后，我注意到菜单保持打开状态，直到页面重新加载。有没有办法让它在失去焦点时消失，例如当用户在菜单外点击时？不仅在用户点击导航图标时。

【问题讨论】：

我相信this 就是您要找的。span>

标签： javascript reactjs react-hooks

【解决方案1】：

假设button 是下拉触发元素的引用，isOpen 添加一个类来打开下拉：

const [isOpen, setIsOpen] = useState(false);
const button = useRef(null);
useEffect(() => window.addEventListener('click', ev => {
    if(button.current && button.current.contains(ev.target)) {setIsOpen(!isOpen)}
    else {setIsOpen(false)}
}));

在DOM上，触发元素：

<div ref={button}>...</div>

下拉菜单

<div className={isOpen ? 'open' : ''}>...</div>

【讨论】：

下拉列表的引用是 div，而不是按钮，是否可以修改代码以使用 div 代替？
它不知道它是什么元素。 button 只是一个变量名.. 在你的 div 上添加 <div ref={button}>...</div>
我得到这个错误：TypeError: Failed to execute 'contains' on 'Node': parameter 1 is not type 'Node' when I click on the screen.
我的错。你应该得到current 值：button.current && button.current.contains(ev.target)
您的代码将buttons.current更改为button.current有一个小错误。我不能这样做，因为最少需要更改 6 个字符。