在反应模糊不关闭我的导航菜单

Question

我是React的新手，并且在React中内置了一个导航菜单（.mega-menu-overlay），我将其更改为可单击，而不是在mouseover和mouseout上显示/隐藏。 使用onmouseover时，以前用来关闭菜单的函数称为handleMenuLeave（）。 任何关于我在做什么错的见解都会很棒。 我的代码如下：

componentDidMount() {
    document.addEventListener('scroll', () => {
      if (this.state.megaMenuContent) {
        if (window.scrollY >= 50) {
          window.requestAnimationFrame(() => {
            this.handleMenuLeave();
          });
        }
      }
      });
    if(document.querySelector('.mega-menu-overlay')){
        document.querySelector('.mega-menu-overlay').addEventListener('blur', () => {
            this.handleMenuLeave();
            alert('clicked');
        });
    }
  }

Answer 1

在反应模糊不关闭我的导航菜单

如果.mega-menu-overlay不是表单元素，按钮或链接，则不会触发blur事件。

 document.querySelector('div').addEventListener('blur', function(e){ console.log(e.target.tagName) }) document.querySelector('input').addEventListener('blur', function(e){ console.log(e.target.tagName) }) document.querySelector('a').addEventListener('blur', function(e){ console.log(e.target.tagName) }) document.querySelector('button').addEventListener('blur', function(e){ console.log(e.target.tagName) }) 

 div{ border:1px solid black; padding:15px 0; } div:nth-child(odd){ background:green; } 

 <div> hello world </div> <input type="text" /> <a href="#">Click me</a> <button> Click me </button> 

您知道如何通过单击其他所有元素来使其关闭吗？

您可以使用CSS选择器（例如div:nth-child(odd)获取所有其他元素，然后将事件侦听器附加到每个元素。

 document.querySelectorAll('div:nth-child(odd)').forEach(function(div){ div.addEventListener('click',function(e){ this.style.display = "none" }) }) 

 div{ border:1px solid black; padding:15px 0; } div:nth-child(odd){ background:green; } 

 <div> First </div> <div> Second </div> <div> Third </div> <div> Fourth </div>