Javascript 引导下拉列表在React中不工作

我正在尝试让一个下拉列表在我的一个React组件的表单中工作。下面是我如何设置代码的下拉部分，下面是我返回的div标记内的表单父标记内的内容：

//<div>
//<form>
//some code here

    <div className="row top-buffer">
        <div className="col">
            <div className="dropdown">
                <button 
                    className="btn btn-secondary dropdown-toggle" 
                    type="button" 
                    id="dropdownMenuButton" 
                    data-toggle="dropdown" 
                    aria-haspopup="true">
                    Dropdown
                </button>
                <div className="dropdown-menu" aria-labelledby="dropdownMenuButton">
                    <a className="dropdown-item" href="#nogo">Item 1</a>
                    <a className="dropdown-item" href="#nogo">Item 2</a>
                    <a className="dropdown-item" href="#nogo">Item 3</a>
                </div>
            </div>
        </div>
    </div>

//some code here
//</form>
//</div>

//
//
//这里有一些代码
下拉列表
//这里有一些代码
//
//

但是，当我单击下拉按钮时，它不会显示下拉菜单和其中的项目

我的所有其他引导组件都工作正常。我做错了什么

编辑：

我在index.js中引用了引导：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import 'bootstrap/dist/css/bootstrap.min.css'
import './App.css'
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

从“React”导入React；
从“react dom”导入react dom；
导入“./index.css”；
从“./App”导入应用程序；
导入“bootstrap/dist/css/bootstrap.min.css”
导入“./App.css”
从“./registerServiceWorker”导入registerServiceWorker；
ReactDOM.render（，document.getElementById（'root'））；
registerServiceWorker（）；

---

我遗漏了什么吗？

这是因为您添加了HTML和CSS，但没有添加js。当你点击下拉菜单时，你的代码不知道该做什么。这是一个你必须如何做到这一点的例子。代码如下：

class Dropdown extends React.Component {
  state = {
    isOpen: false
  };

  toggleOpen = () => this.setState({ isOpen: !this.state.isOpen });

  render() {
    const menuClass = `dropdown-menu${this.state.isOpen ? " show" : ""}`;
    return (
      <div className="dropdown" onClick={this.toggleOpen}>
        <button
          className="btn btn-secondary dropdown-toggle"
          type="button"
          id="dropdownMenuButton"
          data-toggle="dropdown"
          aria-haspopup="true"
        >
          Dropdown
        </button>
        <div className={menuClass} aria-labelledby="dropdownMenuButton">
          <a className="dropdown-item" href="#nogo">
            Item 1
          </a>
          <a className="dropdown-item" href="#nogo">
            Item 2
          </a>
          <a className="dropdown-item" href="#nogo">
            Item 3
          </a>
        </div>
      </div>
    );
  }
}

ReactDOM.render(<Dropdown />, document.getElementById("root"));

类下拉列表扩展了React.Component{
状态={
伊索彭：错
};
toggleOpen=（）=>this.setState（{isOpen:！this.state.isOpen}）；
render（）{
const menuClass=`下拉菜单${this.state.isOpen？“show”：“}”；
返回(
下拉列表
);
}
}
render（，document.getElementById（“根”））；

将引导添加为模块-

npm i --save bootstrap

根据我的经验，请将此行添加到您的

index.js

，然后重试-

import 'bootstrap';

---

让我知道它是怎么回事。

经过长时间的搜索和调整，我在这里得到了答案

您只需添加css即可解决此问题。当您单击下拉按钮时，它会向该元素添加一个类“show”，根据引导，这足以使下拉按钮工作

.show>.dropdown-menu {
  display: block;
  position: absolute;
}

对我来说，它很有魅力

我尝试了@teimurjan解决方案，它对我有效，但有两个问题

我必须管理一个国家，即使它不需要

单击下拉菜单后，展开菜单不会在单击主体或其他任何位置时消失

---

要使下拉菜单和其他js功能在第四次引导中工作，您只需执行以下步骤： 使用npm安装到依赖项：

npm i --save bootstrap jquery popper.js

将其添加到index.js

import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap.js';
import $ from 'jquery';
import Popper from 'popper.js';

---

所有步骤都是从

中执行的。对于我来说，这个问题是通过使用Bootstrap 4.5而不是Bootstrap 5解决的

要使用纱线执行此操作，请编写：

yarn remove bootstrap
yarn add bootstrap@^4.5

在index.js中，我就这样导入它

import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.css';

---

在App.js中像这样导入

导入“./node_模块/bootstrap/dist/css/bootstrap.min.css”

---

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

我希望你的应用程序上已经有了

bootstrap.js

？你把bootstrap js文件链接到你的页面了吗？阅读我在主帖中添加index.js文件代码的同一个问题，如何将bootstrap.js添加到此文件？因此，我需要制作一个单独的下拉组件，并在我想要下拉的组件中使用它？不，只是举个例子。您需要将onClick传递给下拉组件，该组件将切换其打开状态。根据这个打开状态，您将决定是否添加“show”类名。如果您添加这个类名，您的下拉列表将可见，否则它将不可见。这与引导的工作原理不同，例如，如果您从下拉菜单中单击，它将保持打开状态，您必须再次单击以关闭它。当您从下拉列表中单击时，引导将关闭。我也遇到了同样的问题，并尝试了这个解决方案，但无法使其工作相同。下面是进一步了解这个问题的来源：谢谢，这只做了一些小改动，安装bootstrap&proper.js

npmi后bootstrap@4.4.1

npm i--save bootstrap jquery popper.js

i只将以下两行导入index.js:

import'bootstrap/dist/css/bootstrap.css'
导入“bootstrap/js/dist/dropdown”注意：您需要在以下时间后重新启动应用程序：
npm i--save bootstrap jquery popper.js
未找到模块：无法解析/Users/wipe/Desktop/ironhack/lab react ironbeers/starter code/node_modules/bootstrap/dist/js中的“jquery”，请在你的项目中安装它。不要在你的引导项目中使用jquery。我不明白你的意思。我在react项目中使用bootstrap，并使用web包将jquery与我的应用程序捆绑在一起，然后我只需要导入“bootstrap”；如果您使用的是create react应用程序，导入引导的正确方法是导入“bootstrap/dist/css/bootstrap.css”