twitter-bootstrap Bootstrap 下拉菜单在 React 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/50980046/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Dropdown not working in React
提问by FlameDra
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.:
我正在尝试在我的 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>
However, when I click the Dropdown button, it does not display the dropdown menu and the items in it.
但是，当我单击下拉按钮时，它不会显示下拉菜单及其中的项目。
All my other bootstrap components are working fine. What am I doing wrong?
我所有的其他引导组件都工作正常。我究竟做错了什么？
EDIT:
编辑：
I referenced bootstrap in my index.js:
我在 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();
Am I missing something?
我错过了什么吗？
回答by teimurjan
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. Hereis an example how you have to do that. And the code below:
这是因为您已经添加了 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"));
回答by AlexNikonov
To make dropdown menu and other js stuff work in 4th Bootstrap you need just follow next steps: install with npm to dependencies:
要使下拉菜单和其他 js 内容在 4th Bootstrap 中工作，您只需按照以下步骤操作：使用 npm 安装到依赖项：
npm i --save bootstrap jquery popper.js
add it to index.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';
all steps are taken from here
所有步骤都从这里开始
回答by M K Garwa
after a long searching and tweaking I got the answer here
经过长时间的搜索和调整，我在这里得到了答案
you just have to add a css to resolve this issue. when you click on dropdown button, it adds a class "show" to that element and as per bootstrap that much is sufficient to make a dropdown button work.
你只需要添加一个 css 来解决这个问题。当您单击下拉按钮时，它会向该元素添加一个“显示”类，并且根据引导程序，这足以使下拉按钮工作。
.show>.dropdown-menu {
display: block;
position: absolute;
}
for me it work like charm.
对我来说，它就像魅力一样。
I tries @teimurjan solution and it worked for me but with two issues
我尝试了@teimurjan 解决方案，它对我有用，但有两个问题
- I have to manage a state even though its not needed
- once dropdown clicked the expanded menu does not disappear on click of body or anywhere else.
- 我必须管理一个状态，即使它不需要
- 单击下拉菜单后，展开的菜单不会在单击正文或其他任何地方时消失。
回答by Vikram Gulia
Add bootstrap as a module -
将引导程序添加为模块 -
npm i --save bootstrap
From my experience, please add this line to your index.jsand try again -
根据我的经验，请将此行添加到您的index.js并重试 -
import 'bootstrap';
Let me know how it goes.
让我知道事情的后续。
