Bootstrap Dropdown在React中不起作用 [英] Bootstrap Dropdown not working in React

问题描述

我正在尝试在我的一个React组件的表单中使用下拉列表。这是我如何设置代码的下拉部分，以下是在我正在返回的div标签内的表单父标记内。：

I'm trying to get a dropdown working inside a form for one of my React components. Here is how I'm setting up the dropdown portion of the code, the following is inside a form parent tag which is inside the div tag that I'm returning.:

//<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>

然而，当我点击下拉按钮时，它不会显示下拉菜单及其中的项目。

However, when I click the Dropdown button, it does not display the dropdown menu and the items in it.

我所有其他的bootstrap组件都运行正常。我做错了什么？

All my other bootstrap components are working fine. What am I doing wrong?

编辑：

我在index.js中引用了bootstrap：

I referenced bootstrap in my 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();

我错过了什么？

推荐答案

这是因为你已经添加了HTML和CSS而不是js。单击下拉列表时，您的代码不知道该怎么做。 此处是您必须执行此操作的示例。以下代码：

It's because you've added HTML and CSS but not the js for it. Your code doesn't know what to do when you click on the dropdown. Here is an example how you have to do that. And the code below:

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

这篇关于Bootstrap Dropdown在React中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！