代码之家 › 专栏 › 技术社区 › Blackstone4

引导下拉列表未打开第一次单击React 16

reactjs twitter-bootstrap jquery javascript

Blackstone4 · 技术社区 · 7 年前

使用以下工具:Bootstrap 4.0.0-beta。2,波普尔。js 1.13.0,反应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>

这是我在应用程序中加载的方式。jsx公司

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

这就是我加载引导、jQuery和popper的方式。js在我的网页包中。配置。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中的两个条目加载了引导程序两次。配置。js文件和 import 'bootstrap' 应用程序中的声明。jsx所以我注释掉了 导入“引导” 它是有效的

5 回复 | 直到 7 年前

Luis 7 年前

您可能会包含两次jQuery或Bootstrap。我不使用React,但我在角度上也有同样的问题。事实证明,我在索引中包含了jQuery/Bootstrap。html以及我的“脚本”配置(我认为这将是您的“条目”)。

Behnam.Hamzei 5 年前

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

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

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

Hamza Khan 5 年前

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

Hector Lara 5 年前

就我而言,问题是:我同时拥有两个库

引导和引导。捆

我刚离开bootstrap。捆绑,它的工作。

谢谢

Lovin Nagi 5 年前

我最近遇到了同样的问题,我通过编写自定义脚本解决了这个问题:

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