Reactjs 如何在React.js中单击另一个切换按钮时删除活动类？

在React.js中，我在

header.js

中有页面链接菜单和3个切换按钮

单击时，所有切换按钮都有

div

层

我想做的是

当单击切换按钮时，必须删除其他切换按钮和图层类

active

当单击页面链接菜单（menu1、menu2、menu3）时，所有切换按钮和层都必须被删除

我需要什么来更改代码

这就是我目前为止所尝试的

请帮忙

演示：

header.js

import React，{useState，useffect}来自“React”；
从“react router dom”导入{NavLink}；
导出默认函数头（）{
const[show，setShow]=useState（false）；
const[show2，setShow2]=使用状态（false）；
const[show3，setShow3]=使用状态（false）；
useffect（（）=>{
如果（显示）{
document.body.classList.add（“bodyRemoveScroll”）；
}否则{
document.body.classList.remove（“bodyRemoveScroll”）；
}
}，[秀]；
const onToggleClick=（）=>setShow（！show）；
const onToggleClick2=（）=>setShow2（！show2）；
const onToggleClick3=（）=>setShow3（！show3）；
返回(
{/*主页*/}
/菜单1/
菜单2/菜单3/
切换1
第一层/
切换2
第二层/
切换3
第三层
);
}

在您的示例中，单击某个项目后，应取消选择其他值。另一个（更好的）选项是有一个状态变量，您将在其中存储当前的活动按钮id

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

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

const onToggleClick3 = () => {
  setShow(false)
  setShow2(false);
  setShow3(!show3);
};

所以下面的例子对我来说更漂亮

import React, { useState, useEffect } from "react";

import { NavLink } from "react-router-dom";

export default function Header() {
  const [active, setActive] = useState('');

  useEffect(() => {
    if (active) {
      document.body.classList.add("bodyRemoveScroll");
    } else {
      document.body.classList.remove("bodyRemoveScroll");
    }
  }, [active]);

  const onSetActiveMenuItem = (item) => {
    if (item !== active){
      setActive(item);
    }
    else {
      setActive(''); // handle click on currently active item
    }
  };

  return (
    <div className="header">
      {/* <NavLink to="/">Home</NavLink> */}/
      <NavLink to="/menu1">menu1</NavLink>/<NavLink to="/menu2">menu2</NavLink>/
      <NavLink to="/menu3">menu3</NavLink>/
      <button onClick={() => onSetActiveMenuItem('item1')} className={active === 'item1' ? "active" : ""}>
        toggle1
      </button>
      <nav className={`layer1 ${active === 'item1' ? "active" : ""}`}>layer 1</nav>/
      <button onClick={() => onSetActiveMenuItem('item2')} className={active === 'item2' ? "active" : ""}>
        toggle2
      </button>
      <nav className={`layer2 ${active === 'item2' ? "active" : ""}`}>layer 2</nav>/
      <button onClick={() => onSetActiveMenuItem('item3')} className={active === 'item3' ? "active" : ""}>
        toggle3
      </button>
      <nav className={`layer3 ${active === 'item3' ? "active" : ""}`}>layer 3</nav>
    </div>
  );
}

import React，{useState，useffect}来自“React”；
从“react router dom”导入{NavLink}；
导出默认函数头（）{
const[active，setActive]=useState（“”）；
useffect（（）=>{
如果（活动）{
document.body.classList.add（“bodyRemoveScroll”）；
}否则{
document.body.classList.remove（“bodyRemoveScroll”）；
}
}，[活跃]；
const onSetActiveMenuItem=（项）=>{
如果（项目！==活动）{
设置激活（项目）；
}
否则{
setActive（“”）；//句柄单击当前活动项
}
};
返回(
{/*主页*/}/
菜单1/菜单2/
菜单3/
onSetActiveMenuItem（'item1'）}className={active===='item1'？“active”：“}>
切换1
第一层/
OnSetActivemenUIItem（'item2'）}className={active===='item2'？“active”：“}>
切换2
第二层/
OnSetActivemenUIItem（'item3'）}className={active===='item3'？“active”：“}>
切换3
第三层
);
}

我建议只使用一个“显示”useState，并指定一个“类型”useState以进一步澄清图层：

import React, { useState, useEffect } from "react";

import { NavLink } from "react-router-dom";

export default function Header() {
  const [show, setShow] = useState(false);
  const [type, setType] = useState("");

  useEffect(() => {
    if (show) {
      document.body.classList.add("bodyRemoveScroll");
    } else {
      document.body.classList.remove("bodyRemoveScroll");
    }
  }, [show]);
  const onToggleClick = (type) => {
    setShow(!show);
    setType(type);
  };

  return (
    <div className="header">
      {/* <NavLink to="/">Home</NavLink> */}/
      <NavLink to="/menu1">menu1</NavLink>/<NavLink to="/menu2">menu2</NavLink>/
      <NavLink to="/menu3">menu3</NavLink>/
      <button
        onClick={() => onToggleClick("layer1")}
        className={show ? "active" : ""}
      >
        toggle1
      </button>
      <nav className={`layer1 ${show && type === "layer1" ? "active" : ""}`}>
        layer 1
      </nav>
      /
      <button
        onClick={() => onToggleClick("layer2")}
        className={show ? "active" : ""}
      >
        toggle2
      </button>
      <nav className={`layer2 ${show && type === "layer2" ? "active" : ""}`}>
        layer 2
      </nav>
      /
      <button
        onClick={() => onToggleClick("layer3")}
        className={show ? "active" : ""}
      >
        toggle3
      </button>
      <nav className={`layer3 ${show && type === "layer3" ? "active" : ""}`}>
        layer 3
      </nav>
    </div>
  );
}

import React，{useState，useffect}来自“React”；
从“react router dom”导入{NavLink}；
导出默认函数头（）{
const[show，setShow]=useState（false）；
const[type，setType]=useState（“”）；
useffect（（）=>{
如果（显示）{
document.body.classList.add（“bodyRemoveScroll”）；
}否则{
document.body.classList.remove（“bodyRemoveScroll”）；
}
}，[秀]；
常量onToggleClick=（类型）=>{
设置显示（！show）；
setType（类型）；
};
返回(
{/*主页*/}/
菜单1/菜单2/
菜单3/
onToggleClick（“第1层”）}
className={显示？“活动”：“}
>
切换1
第一层
/
onToggleClick（“第二层”）}
className={显示？“活动”：“}
>
切换2
第二层
/
onToggleClick（“第三层”）}
className={显示？“活动”：“}
>
切换3
第三层
);
}

谢谢。这很好用。我还有一个问题，当点击menu1、menu2、menu3页面链接时，如何删除切换按钮上的活动类？@user1833620我看到你已经在你的代码沙盒上完成了，对吗？您刚刚添加了

onClick={resetToggle}

如果您需要在单击按钮时将navLink设置为非活动状态，那么您需要更新当前URL，您可以选中“答案”来执行此操作是的。我尝试了onClick={resetToggle}和您的示例：）谢谢您的作品good:）我已经更新了我的答案，您可以检查第二部分并使用1个状态变量，因为您不应该在一分钟内有两个活动项非常感谢：）

import React, { useState, useEffect } from "react";

import { NavLink } from "react-router-dom";

export default function Header() {
  const [show, setShow] = useState(false);
  const [type, setType] = useState("");

  useEffect(() => {
    if (show) {
      document.body.classList.add("bodyRemoveScroll");
    } else {
      document.body.classList.remove("bodyRemoveScroll");
    }
  }, [show]);
  const onToggleClick = (type) => {
    setShow(!show);
    setType(type);
  };

  return (
    <div className="header">
      {/* <NavLink to="/">Home</NavLink> */}/
      <NavLink to="/menu1">menu1</NavLink>/<NavLink to="/menu2">menu2</NavLink>/
      <NavLink to="/menu3">menu3</NavLink>/
      <button
        onClick={() => onToggleClick("layer1")}
        className={show ? "active" : ""}
      >
        toggle1
      </button>
      <nav className={`layer1 ${show && type === "layer1" ? "active" : ""}`}>
        layer 1
      </nav>
      /
      <button
        onClick={() => onToggleClick("layer2")}
        className={show ? "active" : ""}
      >
        toggle2
      </button>
      <nav className={`layer2 ${show && type === "layer2" ? "active" : ""}`}>
        layer 2
      </nav>
      /
      <button
        onClick={() => onToggleClick("layer3")}
        className={show ? "active" : ""}
      >
        toggle3
      </button>
      <nav className={`layer3 ${show && type === "layer3" ? "active" : ""}`}>
        layer 3
      </nav>
    </div>
  );
}