Reactjs 单击其他div时删除活动状态

首先，我是一个新的反应，所以我只是进入这个钩子的东西。 但基本上我有一个固定的菜单，有5个按钮。当一个按钮被点击时，它将打开某种覆盖，所有按钮都不同

为此，我目前正在使用挂钩，例如：

const MobileNavigation = () => {

    const [menu1Toggle, setMenu1Toggle] = useState(false)
    const [menu2Toggle, setMenu2Toggle] = useState(false)
    const [menu3Toggle, setMenu3Toggle] = useState(false)
    const [menu4Toggle, setMenu4Toggle] = useState(false)
    const [menu5Toggle, setMenu5Toggle] = useState(false)
   
    return ( **below content**  )
}

export default memo(MobileNavigation)

每个按钮的div如下所示：

<div className="menu-button" onClick={() => setMenu1Toggle(!menu1Toggle)}>
</div>

setMenu1Toggle（！menu1Toggle）}>

然后激活此：

<div className={menu1Toggle ? 'menu1-container is-active' : 'menu1-container'}>
    <div className="content"></div>
</div>

因此，基本上它之所以出现，是因为当单击按钮时，

处于活动状态

类被添加

这种方法是有效的，因为一切都在起作用。但是，使用此方法可以同时打开所有菜单。我希望这样，当单击一个按钮时，仅此按钮及其容器处于活动状态，并且它会自动从任何处于活动状态的容器禁用

is active

类

---

如何做到这一点？

您可以存储活动菜单的索引。 当前：存储上次交互按钮的索引 活动：如果其中一个按钮处于活动状态，则为真

const MobileNavigation = () => {
   const [current, setCurrent] = useState(0)
   const [active, setActive] = useState(false)
   ...
}

在渲染按钮的位置

const arr = [1,2,3,4,5]
return arr.map(menuIndex => (
<div className="menu-button" key={menuIndex} onClick={() => {setCurrent(menuIndex); setActive(current!==menuIndex)}}>
</div>
)

const arr=[1,2,3,4,5]
返回arr.map（menuIndex=>(
{setCurrent（menuIndex）；setActive（current！==menuIndex）}>
)

渲染内容：

[1,2,3,4,5].map(index => 
<div className={((index === current) && active)? `menu{index}-container is-active` : 'mobile-menu-container'}>
    <div className="content"></div>
</div>)

[1,2,3,4,5]。地图（索引=>
)

最好创建切换按钮数组，并将其映射到处理当前位置以使其处于活动/非活动状态

如果您正在寻找这样的产品，您可以根据您的要求进行更改

活动类

<div className={oIndex === index ? "tile is-active" : "tile"}>
      <div className="left">
        <div>
          <div>{ar.head}</div>
          <div>
            {oIndex === index ? `Menu ${index}` : `Menu ${index}`}
          </div>
        </div>
      </div>
    </div>

您可以参考以了解如何在单击时使active成为唯一一个active（激活）

我编写了此代码

export default function App() {
  const [menuToggles, setMenuToggles] = useState([
    false,
    false,
    false,
    false,
    false
  ]);

  const setMenuToggle = (index) => {
    let temp = [...menuToggles];
    for (let i = 0; i < menuToggles.length; i++) {
      if (index === i) temp[index] = !temp[index];
      else temp[i] = false;
    }
    setMenuToggles(temp);
  };

  return (
    <div className="App">
      {menuToggles.map((menu, index) => {
        return (
          <button className="menu-button" onClick={() => setMenuToggle(index)}>
            button{index + 1}
          </button>
        );
      })}

      <br />
      <hr />
      {menuToggles.map((menu, index) => {
        return (
          <>
            {menu
              ? `menu${index + 1}-container is-active`
              : `mobile-menu${index + 1}-container`}
            <br />
          </>
        );
      })}
    </div>
  );
}

导出默认函数App（）{
常量[menuToggles，setMenuToggles]=useState([
假,，
假,，
假,，
假,，
假的
]);
常量setMenuToggle=（索引）=>{
设temp=[…菜单切换]；
for（设i=0；i{
返回(
setMenuToggle（索引）}>
按钮{index+1}
);
})}



{menuToggles.map（（菜单，索引）=>{
返回(
{菜单
？`menu${index+1}-容器处于活动状态`
：`mobile menu${index+1}-container`}


);
})}
);
}

工作演示

export default function App() {
  const [menuToggles, setMenuToggles] = useState([
    false,
    false,
    false,
    false,
    false
  ]);

  const setMenuToggle = (index) => {
    let temp = [...menuToggles];
    for (let i = 0; i < menuToggles.length; i++) {
      if (index === i) temp[index] = !temp[index];
      else temp[i] = false;
    }
    setMenuToggles(temp);
  };

  return (
    <div className="App">
      {menuToggles.map((menu, index) => {
        return (
          <button className="menu-button" onClick={() => setMenuToggle(index)}>
            button{index + 1}
          </button>
        );
      })}

      <br />
      <hr />
      {menuToggles.map((menu, index) => {
        return (
          <>
            {menu
              ? `menu${index + 1}-container is-active`
              : `mobile-menu${index + 1}-container`}
            <br />
          </>
        );
      })}
    </div>
  );
}