reactjs - 如何使用 react-bootstrap 模式
问题描述
我有一个名为 Navbar 的组件。当我单击导航栏组件中的记笔记按钮时,我希望它使用 react-bootstrap 显示一个模式。我该怎么办。这是我的代码
class Navbar extends Component {
render(){
return (
<React.Fragment>
<nav style={navStyle}
className="navbar navbar-expand-md">
<p style={noteStyle}>Notes</p>
<button
style={btnStyle}
className="btn btn-light">
Take Note
</button>
</nav>
</React.Fragment>
)
}
};
解决方案
这是一个快速演示。希望能帮助到你。
import React, { useState } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import "./styles.css";
import { Button, Modal } from "react-bootstrap";
const styles = {
navStyle: { background: "red" },
noteStyle: { color: "yellow" },
btnStyle: { background: "blue" }
};
const App = () => {
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
return (
<>
<nav style={styles.navStyle} className="navbar navbar-expand-md">
<p style={styles.noteStyle}>Notes</p>
<Button style={styles.btnStyle} variant="primary" onClick={handleShow}>
Take Note
</Button>
</nav>
<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>
</>
);
};
推荐阅读
- ruby-on-rails - ruby on rails 应用程序卡在 futex 'kill QUIT PID' 但乘客没有留下任何痕迹
- linux - 如何从模块代码中设置 linux 内核模块名称?
- ruby-on-rails - 复选框 - 不更改布尔值
- node.js - 如何在无服务器设置中可靠地连接到 Mongodb?
- php - 如何将其重定向到新标签?
- scala - 使用伪联合类型 js.Dictionary[js.Any] 时编译失败 | 空值
- maximo-anywhere - 我们如何向用户隐藏 Anywhere Work 执行应用程序中的连接设置?
- scala - 处理 Scalatest 的 Prettifier 时如何处理类型擦除
- groovy - 需要使用 Groovy 脚本断言检查整个数组列表中的值不应为 Null 或 0
- sqlite - 如何定位 SQLite 数据库的密钥