【问题标题】:Expand and Collapse Divs in React在 React 中展开和折叠 div
【发布时间】:2021-03-22 14:16:18
【问题描述】:

下面的沙箱显示了两个展开和折叠的 div,我只是在测试一个模板。每个都将切换展开/折叠隐藏在右侧的 div。

我正在尝试做的是,当您单击展开一个 div 时,另一个会折叠。添加该功能的最简单方法是什么?

非常感谢有关逻辑或使其工作的解决方案的任何建议。我正在考虑设置一个 handleClick 函数,当 div "x" 是活动 div 时关闭所有其他 div,但我不完全确定这里的逻辑或解决方案。将不胜感激。

代码沙盒:https://codesandbox.io/s/wandering-cherry-pk7xw?file=/src/NavButton.js

谢谢。

【问题讨论】:

    标签: css reactjs


    【解决方案1】:

    点击时切换菜单,同时关闭另一个菜单。

          <div className="iconBox">
            <div
              className="navIcon"
              onClick={() => {
                setToggle(!toggle);
                setToggle1(false);
              }}
            ></div>
          </div>
    ...
          <div className="iconBox2">
            <div
              className="navIcon"
              onClick={() => {
                setToggle1(!toggle1);
                setToggle(false);
              }}
            ></div>
          </div>
    

    代码沙盒:https://codesandbox.io/s/flamboyant-banzai-58snd

    【讨论】:

    • 感谢您的帮助。我很感激。我的最后一个问题是,我打算让四个 div 切换。有没有更简单的方法来设置功能,所以我不必为每个 div 编写四组 setToggle(false)?
    • @GoreSometimes 您可以为所有 div 设置单一状态以仅使用一个 setState。
    • 如果您不介意我的提问,能否给我看一个这样的例子或指出我可以这样做的正确方向?我相信它会与 useContext 一起使用,但到目前为止我只学习了 react 的基础知识。感谢您的所有帮助。谢谢。
    • @GoreSometimes 你不需要 useContext。使用数组或对象会很好。 codesandbox.io/s/fancy-fast-nzez8
    猜你喜欢
    • 2018-12-13
    • 1970-01-01
    • 2017-02-12
    • 1970-01-01
    • 2014-07-20
    • 2011-05-18
    • 1970-01-01
    • 2013-02-12
    • 1970-01-01
    相关资源
    最近更新 更多