在切换导航中显示和隐藏导航栏

Question

我正在尝试制作响应式导航栏。我更新了状态显示，并已将函数写为setstate显示为false。如果我单击切换按钮。它正在显示并隐藏移动和桌面视图。但是我只需要在移动视图中进行更新。我想更新为移动网站响应式。请帮帮我，这是我的代码：

从“反应”中导入React，{组件}；

class NavBar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      show: true,
    };
  }

  clickToggle = () => {
    this.setState({
      show: !this.state.show,
    });
  };

  render() {
    return (
      <div className="container-fluid">
        <div className="row">
          <div className="col-lg-12">
            <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
              <div className="navbar-brand">
                <img
                  alt="logo"
                  src="./images/or.png"
                  width="100px"
                  height="30"
                  className="d-inline-block align-top img-fluid"
                />
                <span className="nav-brand">Ortho Life Hospital</span>

                <button
                  className="navbar-toggler"
                  type="button"
                  data-toggle="collapse"
                  data-target="#navbarSupportedContent"
                  aria-controls="navbarSupportedContent"
                  aria-expanded="false"
                  aria-label="Toggle navigation"
                  onClick={this.clickToggle}
                >
                  <span className="navbar-toggler-icon"></span>
                </button>
              </div>

              {this.state.show ? (
                <ul className="navbar-nav ml-auto">
                  <li className="nav-item ml-5">
                    <a className="nav-link" href="/">
                      Home
                    </a>
                  </li>
                  <li className="nav-item ml-5">
                    <div className="dropdown">
                      <a
                        className="nav-link"
                        href="/about"
                        id="dropdownMenuButton"
                        data-toggle="dropdown"
                        aria-haspopup="true"
                        aria-expanded="false"
                      >
                        About Us
                      </a>
                      <div
                        className="dropdown-menu"
                        aria-labelledby="dropdownMenuButton"
                      >
                        <a className="dropdown-item" href="/about/#history">
                          History
                        </a>
                        <a className="dropdown-item" href="/about/#vision">
                          Vision and Mission
                        </a>
                        <a className="dropdown-item" href="/about/#whyortho">
                          Why Ortho?
                        </a>
                      </div>
                    </div>
                  </li>
                  <li className="nav-item ml-5">
                    <div className="dropdown">
                      <a
                        className="nav-link"
                        href="/department"
                        id="dropDownDepartment"
                        data-toggle="dropdown"
                        aria-haspopup="true"
                        aria-expanded="false"
                      >
                        Department
                      </a>
                      <div
                        className="dropdown-menu"
                        aria-labelledby="dropDownDepartment"
                      >
                        <a
                          className="dropdown-item"
                          href="/department/#medical"
                        >
                          Medical
                        </a>
                        <a className="dropdown-item" href="/department/#allied">
                          Allied
                        </a>
                      </div>
                    </div>
                  </li>
                  <li className="nav-item ml-5">
                    <a className="nav-link" href="/media">
                      Media
                    </a>
                  </li>
                  <li className="nav-item ml-5">
                    <a className="nav-link" href="/contactus">
                      Contact Us
                    </a>
                  </li>
                </ul>
              ) : null}
            </nav>
          </div>
        </div>
      </div>
    );
  }
}

export default NavBar;