如何使用react js隐藏点击正文时的菜单滑块

Question

我想在reactjs中隐藏菜单滑块。我如何使用react.js.在函数中做到这一点

document.querySelector('.open-menu').onclick = function(){
html.classList.add('active');
};
document.querySelector('.close-menu').onclick = function(){
html.classList.remove('active'); 
};
html.onclick = function(event){
if (event.target === html){
html.classList.remove('active');
}
}; 

我想在react js中使用同样的功能。

Answer 1

检查下面的代码。

import React, { useState } from 'react';
const SomeComponent = () => {
const [isMenuOpen, showMenu] = useState(false)
const toggleMenu = () => showMenu(!isMenuOpen)
return (
<>
{isMenuOpen && <MenuCompoment />}
<div onClick={toggleMenu}><App /></div>
</>
)
}

Answer 2

这是我以前使用过的代码的精简版本。菜单挂载时的UseEffect在文档上为单击事件添加了一个事件侦听器。

当点击发生时，它会使用最接近的元素来查找id的父元素树(注意"#"(如果它找到了一个，那么点击发生在菜单上，否则它发生在如此接近的任何其他元素上。

当菜单被释放时，useEffect的返回函数被调用并删除事件处理程序。

import React, {useState, useEffect} from 'react';
const Page = () => {
const [toggle, setToggle] = useState(false);
return <div>
<button type="button" onClick={e => setToggle(!toggle)}>Toggle</button>
{ toggle && <Menu show={toggle} hide={() => setToggle(false)}/>}
</div>
}
const Menu = ({show, hide}) => {
useEffect(() => {
document.addEventListener("click", listen);
return () => {
document.removeEventListener("click", listen);
}
}, []);
const listen = e => {
if (!e.target.closest("#menu")) {
hide();
}
}
return <div className="menu" id="menu">
<span>I'm a menu</span>
</div>;
}

Answer 3

我认为在菜单项上设置onclick事件会起作用onClick={()=> setOpen(!open)}

export function SidebarMenu({open, setOpen}) {
return (
<div open={open}> 
<Link to="#" title="Home"  onClick={()=> setOpen(!open)} >Home</Link>
</div>
)
}

Answer 4

可能太晚了，但由于我在活动提要中看到了它，我会尽力回答它。

我可以看到，如果你的菜单是打开的，如果点击其他地方，你会想隐藏它。我已经使用useRef来存储菜单节点，每当它打开时，我都会将其与文档进行比较，如果是，我会关闭菜单

Codesandbox链接