[英]How to use the react-bootstrap modal
我有一個名為 Navbar 的組件。 當我單擊導航欄組件中的記筆記按鈕時,我希望它使用 react-bootstrap 顯示一個模式。 我怎么能 go 關於它。 這是我的代碼
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>
</>
);
};
基本上,只要您想單擊導航欄,就需要觸發模式。 您可以在 react-bootstrap 組件庫上輕松找到參考。 如何顯示和隱藏模式(即使用 state 標志)。 我添加了代碼以供參考。 我建議您自己進行調整以更快地學習。
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);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.