我的 React 组件中的打开和关闭按钮没有切换答案

【问题标题】：my open and close buttons in my react components aren't toggling我的 React 组件中的打开和关闭按钮没有切换
【发布时间】：2023-02-24 23:29:58
【问题描述】：

我正在尝试让我的导航栏移动响应，问题是（在移动视图中）： 1.最初我们得到的是FaTimes (x) button 而不是FaBars (hamburger)。 2.当我们点击这些按钮时，导航栏会打开和关闭，但按钮不会切换，它只会呈现 FaTimes (x) 按钮。

我想首先获得 a) FaBars 和 b) 当我们单击它以打开和关闭导航栏时，按钮应在 FaBars 和 FaTimes 之间切换。

这是我的导航栏组件：

import React, { useRef, useState } from "react";
import "../styles/styles.css";
import { NavLink } from "react-router-dom";
import { FaBars, FaTimes } from "react-icons/fa";

function NavBar() {
  const navRef = useRef();
  const [isOpen, setIsOpen] = useState(false);
  const showNavBar = () => {
    setIsOpen(!isOpen);
  };
  return (
    <>
      <nav
        className={`mobile-nav ${isOpen ? "responsive_nav" : ""}`}
        ref={navRef}
      >
        <div className="itemL">
          <NavLink to="/" exact activeClassName="active">
            mjshubham21
          </NavLink>
        </div>
        <div className="itemR">
          //Nav links...
        </div>
      </nav>
      <button className="nav-btn" onClick={showNavBar}>
        <FaBars /> // I want this initially ad then toggle as we tap on it.
      </button>
      <button className="nav-btn nav-close-btn" onClick={showNavBar}>
        <FaTimes />
      </button>
    </>
  );
}

export default NavBar;

【问题讨论】：

标签： css reactjs react-hooks navbar

【解决方案1】：

我不确定您是否尝试使用 responsive_nav 类在 CSS 中管理它，但看起来目前没有显示（或不显示）按钮的逻辑？

实际上，您可以将这些按钮合并为一个按钮，只需在两个图标之间切换即可。如果你改变这个：

 <button className="nav-btn" onClick={showNavBar}>
    <FaBars /> // I want this initially ad then toggle as we tap on it.
 </button>
 <button className="nav-btn nav-close-btn" onClick={showNavBar}>
     <FaTimes />
</button>

为此，使用您的 isOpen 状态布尔在它们之间进行更改：

<button className="nav-btn" onClick={showNavBar}>
    {isOpen ? <FaTimes /> : <FaBars />}
</button>

【讨论】：