Bootstrap Dropdown在React中不起作用

Question

我正在尝试在我的一个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中引用了bootstrap:

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();

我错过了什么吗？

Answer 1

这是因为你已经添加了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"));

Answer 2

要使下拉菜单和其他js内容在4th Bootstrap中起作用，您只需执行以下步骤：使用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';

所有步骤都从这里开始

Answer 3

在 app.js 的 bootstrap-5 中添加以下文件

import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.bundle.min.js";

快乐编码

Answer 4

在 App.js 中这样导入

导入“../node_modules/bootstrap/dist/css/bootstrap.min.css”；

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