javascript - 如何使用 react 或 javascript 检查该类是否已添加到 div 元素？

Question

如果用户单击列表菜单外的任何位置，我想关闭列表菜单。这意味着当单击文档上除列表以外的任何地方时，列表菜单应该关闭。

为此，我定义了如下方法( react )，

handle_click = (event) => {
    if (this.list_menu_ref.current.contains(event.target)) {
        return;
    }
    this.props.on_close(); //this method handles closing the list menu
};

这很好用。现在，当它处于事件状态并且列表菜单打开时，有时我会有一个叠加层，而且当用户单击文档上的任意位置时，我不希望在这种情况下关闭列表菜单。

从 domnode 我们可以识别这个叠加层，类 active 是可见的，如下所示，

<div id="overlay_root" class="active>
    //some content
</div>

因此，每当这个事件类被添加到 ID 为“overlay_root”的 div 并且用户单击文档时，我不希望列表菜单关闭。

我该怎么做？有人可以帮我吗？

谢谢

Answer 1

How to check if the class is added to div element using react or javascript?

这是一种检查元素是否包含类并将其删除的方法

if ( document.getElementById("overlay_root").classList.contains('active') ){
  document.getElementById("overlay_root").classList.remove('active');
}