时间戳

首页 > 解决方案 > 如何在使用 React js 单击正文时隐藏菜单滑块？

javascript - 如何在使用 React js 单击正文时隐藏菜单滑块？

问题描述

我想在 reactjs 中隐藏菜单滑块 onclicking a body。我如何使用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 中具有相同的功能。

标签： javascriptreactjs

解决方案

这是我以前使用过的精简版代码。挂载菜单时的 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>;

}

推荐阅读