引导下拉菜单在 React 中不起作用答案

【问题标题】：Bootstrap Dropdown is not working in React引导下拉菜单在 React 中不起作用
【发布时间】：2020-08-01 22:48:51
【问题描述】：

我在引导下拉菜单中包含了一个下拉按钮来响应，但它不起作用并显示为普通按钮。你能给我一个解决方案吗？

<div className="dropdown">
    <button className="btn btn-secondary 
                 dropdown-toggle" 
                 type="button" 
                 id="dropdownMenuButton"
                 data-toggle="dropdown"
                 aria-haspopup="true" 
                 aria-expanded="false">
                 Dropdown button
    </button>
            <div className="dropdown-menu" aria-labelledby="dropdownMenuButton">
                <a className="dropdown-item" href="#">Action</a>
                <a className="dropdown-item" href="#">Another action</a>
                <a className="dropdown-item" href="#">Something else here</a>
            </div>
</div>

输出是一个像这样的普通按钮。

【问题讨论】：

你在用 react-bootstrap 吗？
@AjinKabeer 我没有使用 react-bootstrap，我只使用了“npm install bootstrap --save”。
你在使用create-react-app吗？ bootstrap 是否正确设置了其他组件的样式，还是只是 dropdowns 没有设置样式？
是的，我使用的是create-react-app，其他的样式都正确，只有下拉菜单不起作用

标签： reactjs bootstrap-4 dropdown

【解决方案1】：

没有popper.js 和jquery.js，下拉菜单将不起作用。

所以请使用npm install popper.js jquery --save 在您的系统中安装popper.js 和jquery.js，不要忘记包含它。

使用 CDN

https://stackblitz.com/edit/create-react-class-m3qfxu?file=index.html

使用 NPM

https://stackblitz.com/edit/create-react-class-xvsthx?file=index.js

【讨论】：

你能告诉我如何导入popper.js吗？
我举了两个例子，如何导入它
@PulsaraSandeepa 首先你需要在js文件中安装npm i --save bootstrap jquery popper.js然后import Popper from 'popper.js';

【解决方案2】：

如果有人不想安装其他依赖项，他们可以使用 react useState hook 使其工作。

import React, { useState } from 'react';

export default function DropCard() {
  const [dropdown, setDropdown] = useState(false);
  const toggleOpen = () => setDropdown(!dropdown);

 return (
    <div className="dropdown">
        <button onClick={toggleOpen}>
          Dropdown
        </button>
        <div
          className={`dropdown-menu ${dropdown ? 'show' : ''}`}
          aria-labelledby="dropdownMenuButton"
          >
            <a className="dropdown-item" href="#">
              Delete
            </a>
            <a className="dropdown-item" href="#">
              Pin to your Profile
            </a>
         </div>
     </div>
  );
}

【讨论】：

【解决方案3】：

确保您已正确导入引导 js

npm install --save bootstrap 然后import "bootstrap/dist/js/bootstrap.min.js";

这对我有用。

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案4】：

解决这个问题需要通过rootCloseEvent，例如

<DropdownButton                          
    title="Download"
    rootCloseEvent="mousedown"
  >
    <MenuItem
      onClick={}
    >
      PDF
    </MenuItem>
    <MenuItem
      onClick={}
    >
      CSV
</MenuItem>
<DropdownButton/>

【讨论】：