引导下拉菜单未打开首先单击 React 16答案

【问题标题】：Bootstrap dropdown not opening first click on React 16引导下拉菜单未打开首先单击 React 16
【发布时间】：2018-05-06 12:45:23
【问题描述】：

使用以下版本：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'，它可以工作

【问题讨论】：

插件数组未关闭。
@1stthomas 感谢您的评论 - 我只是包含了 webpack.config.js 文件的一小部分，以将代码保持在最低限度。完整版已关闭

标签： javascript jquery twitter-bootstrap reactjs

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

这对我来说就像一个魅力:)

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

就我而言，问题是：我同时拥有两个库

bootstrap 和 bootstrap.bundle

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

谢谢

【讨论】：

【解决方案5】：

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

【讨论】：

谢谢 Luis - 原来我已经加载了两次 Bootstrap
这解决了我的问题，有人同时包含了bootstrap.js 和 bootstrap.bundle.js
为我解决了这个问题。谢谢
就像上面的其他海报一样：我已经添加了两次 Bootstrap javascript 参考。删除它，一切正常。