如何使用 react 或 javascript 检查类是否添加到 div 元素？答案

【问题标题】：How to check if the class is added to div element using react or javascript?如何使用 react 或 javascript 检查类是否添加到 div 元素？
【发布时间】：2019-12-31 11:59:27
【问题描述】：

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

为此，我定义了如下方法（反应），

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 中识别出这个覆盖层，其活动类如下所示，

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

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

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

谢谢

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

假设你有两个班级

active : 用于显示列表

和

de-active : 用于隐藏列表

这是你的清单

<div id="overlay_root" class="active" onClick = {e => yourMethod(e)}>
    //some content
</div>

你的方法就像

   yourMethod = (e)=>{
       this.setState(listMenuToggle : !this.state.listMenuToggle )
    }

在这里您可以看到您有一个名为 listMenuToggle 的状态，它可能包含 true 或 false。如果为真，您将显示您的列表，如果为假，则关闭列表。所以你的清单会是这样的

<div id="overlay_root" class={this.state.listMenuToggle ? 'active' : 'de-active' } onClick = {e => yourMethod(e)}>
    //some content
</div>

【讨论】：