React中Bootstrap下拉菜单无法正常工作

Question

我在React中使用了bootstrap下拉按钮，但它没有起作用，只是显示为普通的按钮。你能为我提供解决方法吗？

<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>

输出结果是一个类似于这样的普通按钮。

- Pulsara Sandeepa

---

你正在使用 react-bootstrap 吗？ - Ajin Kabeer

@AjinKabeer 我没有使用react-bootstrap，我只是使用了“npm install bootstrap --save”。 - Pulsara Sandeepa

你正在使用 create-react-app 吗？其他组件是否被 bootstrap 正确地样式化了，还是只有 dropdowns 没有样式化？ - Ajin Kabeer

是的，我正在使用 create-react-app，其他部分都已正确设置样式，只有下拉菜单没有正常工作。 - Pulsara Sandeepa

Answer 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

- Nisharg Shah

---

你能告诉我如何导入 popper.js 吗？ - Pulsara Sandeepa

我提供两个例子，如何导入它。 - Nisharg Shah

@PulsaraSandeepa 首先您需要安装 npm i --save bootstrap jquery popper.js，然后在js文件中导入 import Popper from 'popper.js';。 - Shivam Suchak

Answer 2

如果有人不想安装其他依赖项，他们可以使用React的useState钩子使其工作。

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

- Yogesh Yadav

Answer 3

要解决此问题，需要传递rootCloseEvent，例如：

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

- Krishnendu Pal

Answer 4

请确保正确导入了Bootstrap JS

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

这对我起作用了。

- kevinskywalker

---

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心找到有关如何编写良好答案的更多信息。 - Community