[英]How to use the react-bootstrap modal
I have a component called Navbar.我有一个名为 Navbar 的组件。 When I click on the take note button in the Navbar component I want it to show a modal using react-bootstrap.
当我单击导航栏组件中的记笔记按钮时,我希望它使用 react-bootstrap 显示一个模式。 How can I go about it.
我怎么能 go 关于它。 Here is my code
这是我的代码
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>
)
}
};
Here is a quick demo .这是一个快速演示。 Hope it helps.
希望能帮助到你。
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>
</>
);
};
Basically you need to trigger modal whenever you want to click on the navbar.基本上,只要您想单击导航栏,就需要触发模式。 You can easily find a reference on the react-bootstrap component library.
您可以在 react-bootstrap 组件库上轻松找到参考。 How to show and hide modal(ie using state flags).
如何显示和隐藏模式(即使用 state 标志)。 I added code for reference.
我添加了代码以供参考。 I would suggest doing your own tweaks to learn faster.
我建议您自己进行调整以更快地学习。
import React, { useState } from "react";
import ReactDOM from "react-dom";
import {
Navbar,
NavbarBrand,
Nav,
Button,
Modal,
ModalHeader,
ModalBody,
ModalFooter
} from "reactstrap";
import "./styles.css";
function App() {
const [modal, setModal] = useState(false);
const toggle = () => setModal(!modal); //Set hide or show modal
return (
<div className="App">
<Navbar color="light" light expand="md">
<NavbarBrand href="/">reactstrap</NavbarBrand>
<Nav className="ml-auto" navbar>
<Button onClick={toggle}>Take Note</Button> // Show modal
</Nav>
</Navbar>
//Modal
<Modal isOpen={modal} toggle={toggle}>
<ModalHeader toggle={toggle}>Create Note</ModalHeader>
<ModalBody>Your Note</ModalBody>
<ModalFooter>
<Button color="primary" onClick={toggle}>
Do Something More
</Button>{" "}
<Button color="secondary" onClick={toggle}>
Cancel
</Button>
</ModalFooter>
</Modal>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Live demo: https://codesandbox.io/s/pensive-leaf-vkrqf现场演示: https://codesandbox.io/s/pensive-leaf-vkrqf
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.