Reactjs 响应导航栏切换按钮不工作

我正试图通过在

reactjs

中使用引导程序来执行响应

navbar

。我已经更新了显示状态，以便显示或隐藏元素，但切换按钮不是触发器。如果我在引导程序中使用脚本链接，它将正常工作，但我不想使用脚本链接并想更新手册。请帮助我。 这是我的密码：

import React, { Component } from "react";

export default class NavBar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      show: true,
    };
  }
  showToggle = () => {
    this.setState({
      show: false,
    });
  };
  render() {
    return (
      <div className="container-fluid">
        <div className="row">
          <div className="col-lg-12 col-md-12 col-sm-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> */}
              </div>
              <button
                className="navbar-toggler"
                type="button"
                // data-toggle="collapse"
                // data-target="#navbarSupportedContent"
                // aria-controls="navbarSupportedContent"
                // aria-expanded="false"
                // aria-label="Toggle navigation"
                onClick={this.showToggle}
              >
                <span className="navbar-toggler-icon"></span>
              </button>
              {this.state.show ? (
                <div
                  className="collapse navbar-collapse"
                  id="navbarSupportedContent"
                >
                  <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>
                </div>
              ) : null}
            </nav>
          </div>
        </div>
      </div>
    );
  }
}

import React，{Component}来自“React”；
导出默认类导航栏扩展组件{
建造师（道具）{
超级（道具）；
此.state={
秀：没错，
};
}
showToggle=（）=>{
这是我的国家({
秀:假,，
});
};
render（）{
返回(
{/*Ortho Life医院*/}
{this.state.show(












)：null}
);
}
}

添加

导入“bootstrap/dist/js/bootstrap.min”

js文件位于'index.js``或当前页面。添加

import“bootstrap/dist/js/bootstrap.min”js文件。