Question

我是React的新手，并且在React中内置了一个导航菜单（.mega-menu-overlay），我将其更改为可点击，而不是在鼠标悬停和鼠标移动时显示/隐藏。使用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

on react中的模糊不是关闭我的导航菜单

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

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>

在模糊反应中没有关闭我的导航菜单

1 个答案: