Question

使用以下内容：Bootstrap 4.0.0-beta.2，popper.js 1.13.0和React 16.0.0。我的React应用程序中有多个下拉按钮，并且在第一次单击时它们无法打开。第一次单击后，它们按预期工作，并在第一次单击时打开和关闭。有什么想法吗？

<div className="dropdown">
    <button type="button" className="btn btn-primary btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Edit</button>
    <div className="dropdown-menu dropdown-menu-right">
        <Link role="button" className="dropdown-item text-sm" to={path1}>Click me</Link>
        <Link role="button" className="dropdown-item text-sm" to={path2}>Click me</Link>
        <Link role="button" className="dropdown-item text-sm" to={path3}>Click me</Link>
    </div>
</div>

这是我在app.jsx

中加载的方式

//load bootstrap and app css
import Popper from 'popper.js';
window.Popper = Popper;
import 'bootstrap';
import 'style-loader!css-loader!sass-loader!applicationStyles';

这就是我在webpack.config.js文件中加载bootstrap，jQuery和popper.js的方法

entry: [
    'script-loader!jquery/dist/jquery.min.js',
    'script-loader!popper.js/dist/umd/popper.min.js',
    'script-loader!bootstrap/dist/js/bootstrap.min.js',
    'babel-polyfill',
    './app/app.jsx',
],
externals: {
    jQuery: 'jQuery'
},
plugins: [
    // new BundleAnalyzerPlugin(),
    new webpack.ProvidePlugin({
        '$': 'jQuery',
        'jQuery': 'jQuery',
        Popper: ['popper.js', 'default'],
    }),

我尝试将$('.dropdown-toggle').dropdown()添加到onClick中，但无效

解决方案结果我使用webpack.config.js文件中的条目和app.jsx中的import 'bootstrap'语句两次加载了Bootstrap，因此我注释掉了import 'bootstrap'它的工作原理

Answer 1

你可能有两次jQuery或Bootstrap。我没有使用React，但是我遇到了与Angular相同的问题。事实证明我在我的index.html中包含了jQuery / Bootstrap以及我的“脚本”配置（我认为这将是你的“条目”）。

Answer 2

您应该导入此行并再次测试：

import 'bootstrap/dist/js/bootstrap.bundle';

这对我来说就像是一件魅力：）

Answer 3

我最近遇到了同一问题，我通过编写自定义脚本解决了该问题：

<div class="filter-dropdown text-right">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Edit</button>
  <div class="dropdown-menu">
     <a class="dropdown-item" href="#">Link 1</a>
     <a class="dropdown-item" href="#">Link 2</a>
     <a class="dropdown-item" href="#">Link 3</a>
  </div>
</div>



$(".filter-dropdown").on("click", ".dropdown-toggle", function(e) { 
    e.preventDefault();
    $(this).parent().addClass("show");
    $(this).attr("aria-expanded", "true");
    $(this).next().addClass("show"); 
  });

Answer 4

在我的情况下，问题是：我同时拥有两个库

bootstrap和bootstrap.bundle

我刚刚离开了bootstrap.bundle，它正在工作。

谢谢

Answer 5

我遇到了同样的问题。我注意到当我同时使用 bootstrap.min.js 和 jquery.min.js 时。然后，我的下拉菜单在页面加载后第一次需要两次单击才能切换。然后，我评论了 bootstrap.min.js 。现在没有给我这个问题。尝试这个。也许它将解决您的问题。

Bootstrap下拉列表没有打开第一次点击React 16

5 个答案: