Reactjs 在React.js中单击“外部”时如何隐藏层？

我有一个切换按钮，它显示/隐藏层

假设层的宽度是300px，高度是300px

单击图层外部区域时如何隐藏图层

这是我到目前为止所拥有的代码

const Navi = () => {
  const [show, setShow] = useState(false);
  const [show2, setShow2] = useState(false);

  const onToggleClick = () => {
    setShow(!show);
    setShow2(false);
  };

  const onToggleClick2 = () => {
    setShow(false);
    setShow2(!show2);
  };

  const resetToggle = () => {
    setShow(false);
    setShow2(false);
  };

  return (
    <div className="wrap-navi">
      <div className="navi">
        <NavLink to="/menu" onClick={resetToggle}>
          menu
        </NavLink>
        <button onClick={onToggleClick} className={show ? "active" : ""}>
          toggle1
        </button>
        <button onClick={onToggleClick2} className={show2 ? "active" : ""}>
          toggle2
        </button>
      </div>
      <nav className={`layer1 ${show ? "active" : ""}`}>toggle1 Layer</nav>
      <nav className={`layer2 ${show2 ? "active" : ""}`}>toggle2 Layer</nav>
    </div>
  );
};

const Navi=（）=>{
const[show，setShow]=useState（false）；
const[show2，setShow2]=使用状态（false）；
const onToggleClick=（）=>{
设置显示（！show）；
设置显示2（假）；
};
const onToggleClick2=（）=>{
设置显示（假）；
设置显示2（！显示2）；
};
常量重置切换=（）=>{
设置显示（假）；
设置显示2（假）；
};
返回(
菜单
切换1
切换2
切换1层
切换2层
);
};

您可以使用CSS并针对“非活动”类，如下所示：

.inactive{
显示：无；
}

然后，在主文件中：

import React，{useState}来自“React”；
导入“/styles.css”；
常量应用=（）=>{
const[show，setShow]=useState（false）；
const[show2，setShow2]=使用状态（false）；
const onToggleClick=（）=>{
设置显示（！show）；
设置显示2（假）；
};
const onToggleClick2=（）=>{
设置显示（假）；
设置显示2（！显示2）；
};
常量重置切换=（）=>{
设置显示（假）；
设置显示2（假）；
};
返回(
切换1
切换2
切换1层
切换2层
);
};
导出默认应用程序；

下面是一个代码沙盒，其中包含我所描述的内容：