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中引用了引导程序：

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。当您单击下拉列表时，您的代码不知道该怎么办。 Here是您必须执行此操作的示例。以及下面的代码：

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';

所有步骤均从here

开始

Answer 3

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

用纱线写：

yarn remove bootstrap
yarn add bootstrap@^4.5

在 index.js 中，我只是像这样导入它。

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

Answer 4

将引导程序添加为模块-

npm i --save bootstrap

根据我的经验，请将此行添加到您的index.js中，然后重试-

import 'bootstrap';

让我知道怎么回事。

Answer 5

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

您只需要添加一个CSS即可解决此问题。当您单击下拉按钮时，它将向该元素添加一个“显示”类，并且根据引导程序，足以使下拉按钮起作用。

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

对我来说，它就像魅力一样。

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

即使不需要状态，我也必须管理状态
单击下拉菜单后，展开的菜单不会在单击正文或其他任何位置时消失。

Answer 6

在 App.js 中像这样导入

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

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

Bootstrap Dropdown在React中不起作用

6 个答案: