如何在 REACT 中添加一个简单的弹出窗口?
How to add a simple popup in REACT?
我正在使用 React 构建应用程序。我是新手。所以在这里我想制作一个弹出窗口,当单击按钮时会弹出。它基本上是一个 login/signup 系统。如何添加弹出窗口?我应该安装一个包吗?
这是代码:
import React, { Component } from "react";
import "./login.css";
class Screen extends Component {
state = {
name: "",
password: "",
};
function1 = (event) => {
this.setState({ name: event.target.value });
};
function2 = (event) => {
this.setState({ password: event.target.value });
};
render() {
return (
<div>
<div>
<ul>
<li>
<p id="logo">My website </p>
</li>
<li>
<a class="active">Home</a>
</li>
<li>
<a onClick={this.function1}>Page 1</a>
</li>
<li>
<a>Page 2</a>
</li>
<li>
<a>Page 3</a>
</li>
<li>
<a id="loggedinas">Logged in as: {this.state.name}</a>
</li>
</ul>
</div>
<h1>This is the title</h1>
<h2>Login/Sign Up</h2>
<input type="email" onChange={this.function1} maxLength="20"></input>
<br />
<br />
<input type="password" onChange={this.function2}></input>
<h1> logged in as: {this.state.name}</h1>
</div>
);
}
}
export default Screen;
Css :
button {
background-color: aqua;
}
body {
background-color: white;
}
/* Navbar */
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
#logo {
color: white;
padding-left: 10px;
font-weight: bold;
}
#loggedinas {
color: white;
font-style: italic;
font-weight: bold;
}
/* Navbar end */
有简单的方法吗?
我希望清楚,
提前谢谢你。
安装 React bootstrap,很容易做到。
签到 https://react-bootstrap.github.io/components/modal/
第一步是导入包。
import React from "react";
import { Modal, Button, Form } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.css";
然后在App功能中可以设置state来显示和隐藏弹窗
function App() {
const [show, setShow] = useState(false);
const handleShow = () => setShow(true);
return (
<>
<div
className="d-flex align-items-center justify-content-center"
style={{ height: "100vh" }}
>
<Button variant="primary" onClick={handleShow}>
Launch Form modal
</Button>
</div>
<Modal show={show}>
<Modal.Header closeButton>
<Modal.Title>Login Form</Modal.Title>
</Modal.Header>
<Modal.Body>
<></>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary">Close Modal</Button>
</Modal.Footer>
</Modal>
</>
);
}
这只是一个示例,希望对您有所帮助。
对于class个组件
在app.js
import React from "react";
import Modal from "./Component/Modal";
import "./styles.css";
class App extends React.Component {
state = {
show: false
};
showModal = e => {
this.setState({
show: !this.state.show
});
};
render() {
return (
<div className="App">
<button
class="toggle-button"
id="centered-toggle-button"
onClick={e => {
this.showModal(e);
}}
>
{" "}
show Modal{" "}
</button>
<Modal onClose={this.showModal} show={this.state.show}>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis
deserunt corrupti, ut fugit magni qui quasi nisi amet repellendus non
</Modal>
</div>
);
}
}
export default App;
在component/modal
创建名为 index.js
的文件
import React from "react";
import "./modal.css";
import PropTypes from "prop-types";
export default class Modal extends React.Component {
onClose = e => {
this.props.onClose && this.props.onClose(e);
};
render() {
if (!this.props.show) {
return null;
}
return (
<div class="modal" id="modal">
<h2>Modal Window</h2>
<div class="content">{this.props.children}</div>
<div class="actions">
<button class="toggle-button" onClick={this.onClose}>
close
</button>
</div>
</div>
);
}
}
Modal.propTypes = {
onClose: PropTypes.func.isRequired,
show: PropTypes.bool.isRequired
};
制作文件modal.css
html,
body {
height: 100%;
}
body {
background: #eee;
display: flex;
justify-content: center;
align-items: center;
}
.modal {
width: 500px;
background: white;
border: 1px solid #ccc;
transition: 1.1s ease-out;
box-shadow: -2rem 2rem 2rem rgba(0, 0, 0, 0.2);
filter: blur(0);
transform: scale(1);
opacity: 1;
visibility: visible;
}
.modal.off {
opacity: 0;
visibility: hidden;
filter: blur(8px);
transform: scale(0.33);
box-shadow: 1rem 0 0 rgba(0, 0, 0, 0.2);
}
@supports (offset-rotation: 0deg) {
offset-rotation: 0deg;
offset-path: path("M 250,100 S -300,500 -700,-200");
.modal.off {
offset-distance: 100%;
}
}
@media (prefers-reduced-motion) {
.modal {
offset-path: none;
}
}
.modal h2 {
border-bottom: 1px solid #ccc;
padding: 1rem;
margin: 0;
}
.modal .content {
padding: 1rem;
}
.modal .actions {
border-top: 1px solid #ccc;
background: #eee;
padding: 0.5rem 1rem;
}
.modal .actions button {
border: 0;
background: #78f89f;
border-radius: 5px;
padding: 0.5rem 1rem;
font-size: 0.8rem;
line-height: 1;
}
#centered-toggle-button {
position: absolute;
}
这是一个带有 class 组件的模态示例。请检查这是否对您有帮助。
@Python
第二个例子
你可以试试这个,如果不行的话。这也有点简单。
使用 React bootstrap 模块。
在App.js
import React from 'react';
import './App.css';
import { Button,Modal} from 'react-bootstrap';
class App extends React.Component {
constructor(){
super();
this.state={
show:false
}
}
handleModal(){
this.setState({show:!this.state.show})
}
render(){
return (
<div>
<h2 align='center'>Example of Modal in Reactjs</h2>
<div className="modalClass">
<Button onClick={()=>this.handleModal()}>Click To Open Modal</Button>
</div>
<Modal show={this.state.show} onHide={()=>this.handleModal()}>
<Modal.Header closeButton>This is a Modal Heading</Modal.Header>
<Modal.Body>This is a Modal Body</Modal.Body>
<Modal.Footer>
<Button onClick={()=>this.handleModal()}>Close</Button>
<Button onClick={()=>this.handleModal()}>Save</Button>
</Modal.Footer>
</Modal>
</div>
)
}
}
export default App;
在 css 文件中添加
.modalClass {
text-align: center;
margin-top: 100px;
}
我正在使用 React 构建应用程序。我是新手。所以在这里我想制作一个弹出窗口,当单击按钮时会弹出。它基本上是一个 login/signup 系统。如何添加弹出窗口?我应该安装一个包吗?
这是代码:
import React, { Component } from "react";
import "./login.css";
class Screen extends Component {
state = {
name: "",
password: "",
};
function1 = (event) => {
this.setState({ name: event.target.value });
};
function2 = (event) => {
this.setState({ password: event.target.value });
};
render() {
return (
<div>
<div>
<ul>
<li>
<p id="logo">My website </p>
</li>
<li>
<a class="active">Home</a>
</li>
<li>
<a onClick={this.function1}>Page 1</a>
</li>
<li>
<a>Page 2</a>
</li>
<li>
<a>Page 3</a>
</li>
<li>
<a id="loggedinas">Logged in as: {this.state.name}</a>
</li>
</ul>
</div>
<h1>This is the title</h1>
<h2>Login/Sign Up</h2>
<input type="email" onChange={this.function1} maxLength="20"></input>
<br />
<br />
<input type="password" onChange={this.function2}></input>
<h1> logged in as: {this.state.name}</h1>
</div>
);
}
}
export default Screen;
Css :
button {
background-color: aqua;
}
body {
background-color: white;
}
/* Navbar */
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
#logo {
color: white;
padding-left: 10px;
font-weight: bold;
}
#loggedinas {
color: white;
font-style: italic;
font-weight: bold;
}
/* Navbar end */
有简单的方法吗?
我希望清楚, 提前谢谢你。
安装 React bootstrap,很容易做到。 签到 https://react-bootstrap.github.io/components/modal/
第一步是导入包。
import React from "react";
import { Modal, Button, Form } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.css";
然后在App功能中可以设置state来显示和隐藏弹窗
function App() {
const [show, setShow] = useState(false);
const handleShow = () => setShow(true);
return (
<>
<div
className="d-flex align-items-center justify-content-center"
style={{ height: "100vh" }}
>
<Button variant="primary" onClick={handleShow}>
Launch Form modal
</Button>
</div>
<Modal show={show}>
<Modal.Header closeButton>
<Modal.Title>Login Form</Modal.Title>
</Modal.Header>
<Modal.Body>
<></>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary">Close Modal</Button>
</Modal.Footer>
</Modal>
</>
);
}
这只是一个示例,希望对您有所帮助。
对于class个组件
在app.js
import React from "react";
import Modal from "./Component/Modal";
import "./styles.css";
class App extends React.Component {
state = {
show: false
};
showModal = e => {
this.setState({
show: !this.state.show
});
};
render() {
return (
<div className="App">
<button
class="toggle-button"
id="centered-toggle-button"
onClick={e => {
this.showModal(e);
}}
>
{" "}
show Modal{" "}
</button>
<Modal onClose={this.showModal} show={this.state.show}>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis
deserunt corrupti, ut fugit magni qui quasi nisi amet repellendus non
</Modal>
</div>
);
}
}
export default App;
在component/modal
创建名为 index.js
的文件import React from "react";
import "./modal.css";
import PropTypes from "prop-types";
export default class Modal extends React.Component {
onClose = e => {
this.props.onClose && this.props.onClose(e);
};
render() {
if (!this.props.show) {
return null;
}
return (
<div class="modal" id="modal">
<h2>Modal Window</h2>
<div class="content">{this.props.children}</div>
<div class="actions">
<button class="toggle-button" onClick={this.onClose}>
close
</button>
</div>
</div>
);
}
}
Modal.propTypes = {
onClose: PropTypes.func.isRequired,
show: PropTypes.bool.isRequired
};
制作文件modal.css
html,
body {
height: 100%;
}
body {
background: #eee;
display: flex;
justify-content: center;
align-items: center;
}
.modal {
width: 500px;
background: white;
border: 1px solid #ccc;
transition: 1.1s ease-out;
box-shadow: -2rem 2rem 2rem rgba(0, 0, 0, 0.2);
filter: blur(0);
transform: scale(1);
opacity: 1;
visibility: visible;
}
.modal.off {
opacity: 0;
visibility: hidden;
filter: blur(8px);
transform: scale(0.33);
box-shadow: 1rem 0 0 rgba(0, 0, 0, 0.2);
}
@supports (offset-rotation: 0deg) {
offset-rotation: 0deg;
offset-path: path("M 250,100 S -300,500 -700,-200");
.modal.off {
offset-distance: 100%;
}
}
@media (prefers-reduced-motion) {
.modal {
offset-path: none;
}
}
.modal h2 {
border-bottom: 1px solid #ccc;
padding: 1rem;
margin: 0;
}
.modal .content {
padding: 1rem;
}
.modal .actions {
border-top: 1px solid #ccc;
background: #eee;
padding: 0.5rem 1rem;
}
.modal .actions button {
border: 0;
background: #78f89f;
border-radius: 5px;
padding: 0.5rem 1rem;
font-size: 0.8rem;
line-height: 1;
}
#centered-toggle-button {
position: absolute;
}
这是一个带有 class 组件的模态示例。请检查这是否对您有帮助。
@Python
第二个例子
你可以试试这个,如果不行的话。这也有点简单。
使用 React bootstrap 模块。 在App.js
import React from 'react';
import './App.css';
import { Button,Modal} from 'react-bootstrap';
class App extends React.Component {
constructor(){
super();
this.state={
show:false
}
}
handleModal(){
this.setState({show:!this.state.show})
}
render(){
return (
<div>
<h2 align='center'>Example of Modal in Reactjs</h2>
<div className="modalClass">
<Button onClick={()=>this.handleModal()}>Click To Open Modal</Button>
</div>
<Modal show={this.state.show} onHide={()=>this.handleModal()}>
<Modal.Header closeButton>This is a Modal Heading</Modal.Header>
<Modal.Body>This is a Modal Body</Modal.Body>
<Modal.Footer>
<Button onClick={()=>this.handleModal()}>Close</Button>
<Button onClick={()=>this.handleModal()}>Save</Button>
</Modal.Footer>
</Modal>
</div>
)
}
}
export default App;
在 css 文件中添加
.modalClass {
text-align: center;
margin-top: 100px;
}