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

Question

在React.js中，我在header.js中有页面链接菜单和3个切换按钮。

单击时，所有切换按钮都有div层。

我想做的是。。。

1. 当单击切换按钮时，必须删除其他切换按钮和图层。类别活动
2. 当单击页面链接菜单（menu1、menu2、menu3）时，所有切换按钮和层都必须被删除

我需要什么来更改代码？

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

请帮忙。

演示：https://codesandbox.io/s/49io4

header.js

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

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

export default function Header() {
  const [show, setShow] = useState(false);
  const [show2, setShow2] = useState(false);
  const [show3, setShow3] = useState(false);

  useEffect(() => {
    if (show) {
      document.body.classList.add("bodyRemoveScroll");
    } else {
      document.body.classList.remove("bodyRemoveScroll");
    }
  }, [show]);
  const onToggleClick = () => setShow(!show);
  const onToggleClick2 = () => setShow2(!show2);
  const onToggleClick3 = () => setShow3(!show3);

  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} className={show ? "active" : ""}>
        toggle1
      </button>
      <nav className={`layer1 ${show ? "active" : ""}`}>layer 1</nav>/
      <button onClick={onToggleClick2} className={show2 ? "active" : ""}>
        toggle2
      </button>
      <nav className={`layer2 ${show2 ? "active" : ""}`}>layer 2</nav>/
      <button onClick={onToggleClick3} className={show3 ? "active" : ""}>
        toggle3
      </button>
      <nav className={`layer3 ${show3 ? "active" : ""}`}>layer 3</nav>
    </div>
  );
}

Answer 1

我建议只使用一个"show"useState，并指定一个"type"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>
  );
}

Answer 2

在您的示例中，您应该在单击某个项目后取消选择其他值。另一个（更好的）选项是有一个状态变量，您将在其中存储当前的活动按钮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>
  );
}