单击按钮后,Bootstrap5 模态未在 React.js 中显示
Posted
技术标签:
【中文标题】单击按钮后,Bootstrap5 模态未在 React.js 中显示【英文标题】:Bootstrap5 modal not displaying in React.js after clicking on the button 【发布时间】:2021-04-03 07:07:38 【问题描述】:我正在使用 bootstrap5 进行反应。我在 React 中成功安装了 bootstrap5。现在我必须在我的页面上显示模态,所以我在我的页面上添加了一个按钮和模态代码。
下面是我用于模态的代码。现在我点击按钮然后没有任何工作。我没有得到我的模态。
这里有什么问题?
import React from "react";
function addEmployee()
return(
<div className="addEmployee">
<button type="button" className="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">Add Employee</button>
<div className="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabIndex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title" id="staticBackdropLabel">Modal title</h5>
<button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div className="modal-body">
...
</div>
<div className="modal-footer">
<button type="button" className="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" className="btn btn-primary">Understood</button>
</div>
</div>
</div>
</div>
</div>
)
export default addEmployee;
【问题讨论】:
【参考方案1】:Bootstrap 5 不再依赖于 jQuery,因此您不需要像 react-bootstrap
这样的第三方库来在 React 中使用 Bootstrap。例如,您可以在标记中使用data-bs-
属性,或为 Bootstrap 模态创建一个功能组件,其中包含显示/隐藏模态的方法... p>
function ModalExample()
const modalRef = useRef()
const showModal = () =>
const modalEle = modalRef.current
const bsModal = new Modal(modalEle,
backdrop: 'static',
keyboard: false
)
bsModal.show()
const hideModal = () =>
const modalEle = modalRef.current
const bsModal= bootstrap.Modal.getInstance(modalEle)
bsModal.hide()
return(
<div className="addEmployee">
<button type="button" className="btn btn-primary" onClick=showModal>Add Employee</button>
<div className="modal fade" ref=modalRef tabIndex="-1" >
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title" id="staticBackdropLabel">Modal title</h5>
<button type="button" className="btn-close" onClick=hideModal aria-label="Close"></button>
</div>
<div className="modal-body">
...
</div>
<div className="modal-footer">
<button type="button" className="btn btn-secondary" onClick=hideModal>Close</button>
<button type="button" className="btn btn-primary">Understood</button>
</div>
</div>
</div>
</div>
</div>
)
Demo of both methods
【讨论】:
像魅力一样工作谢谢。我发现这个解决方案比依赖另一个库更优雅。【参考方案2】:我建议你使用react-bootstrap
它更容易,并且已经为你完成了 javascript
React-Bootstrap 取代了 Bootstrap JavaScript
每个组件都是作为一个 React 组件从头开始构建的,没有像 jQuery 这样不需要的依赖项。
要开始安装包npm install react-bootstrap bootstrap
看看这个例子
import Modal, Button from "react-bootstrap";
function Example()
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
return (
<>
<Button variant="primary" onClick=handleShow>
Launch demo modal
</Button>
<Modal show=show onHide=handleClose>
<Modal.Header closeButton>
<Modal.Title>Modal heading</Modal.Title>
</Modal.Header>
<Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick=handleClose>
Close
</Button>
<Button variant="primary" onClick=handleClose>
Save Changes
</Button>
</Modal.Footer>
</Modal>
</>
);
render(<Example />);
Gaurav Singhal 的博客@PluralSight
您必须使用使用内部状态的受控组件来设置 值并更改组件的行为。图书馆喜欢 jQuery 直接进行 DOM 操作,而 React 组件使用 虚拟 DOM 修改浏览器上的实际 DOM。使用 jQuery 来 改变你的组件的行为是可能的。仍然会导致 出乎意料的结果并使其难以调试。反应引导 在纯 React 中实现每个组件,因此您不必担心 关于Bootstrap对jQuery的依赖
查看他们的(react-bootstrap)文档页面,这里是您可以关注/转到react-bootstrap的链接
【讨论】:
我已经安装了 bootstrap5。我需要卸载它吗? 不,只需运行 npm install react-bootstrap ,React-Bootstrap 不依赖于非常精确的 Bootstrap 版本,它不附带任何包含的 CSS。但是,需要一些样式表才能使用这些组件。所以你有 import 'bootstrap/dist/css/bootstrap.min.css';到你的 index.js 文件 我收到错误第 5:27 行:React Hook "useState" 在函数 "addEmployee" 中被调用,该函数既不是 React 函数组件也不是自定义 React Hook 函数。 React 组件名称必须以大写字母 react-hooks/rules-of-hooks 开头 好的。所以我添加了 import React, useEffect, useState from "react";和大写字母的函数名称。并解决了我的问题 实现基于react-bootstrap
的导航确实很容易,但是当自定义导航设计来自 UI/UX 设计器时,在 react 项目中实现特定功能也很困难!有什么想法吗?以上是关于单击按钮后,Bootstrap5 模态未在 React.js 中显示的主要内容,如果未能解决你的问题,请参考以下文章