我正在尝试创建一个弹出窗口,该窗口在按下 KYC.jsx 中的右箭头后立即显示。我创建了,但它也显示为一个窗口,但在我停止单击按钮后消失。我做错什么了吗?我的 KYC.jsx、Popup.jsx 和 KYC.css 和 Popup.css 代码如下: KYC.jsx
import React, { useState } from "react";
import "./KYC.css";
import { Link } from "react-router-dom";
import Popup from "./Popup";
const KYC = () => {
const [isOpen, setIsOpen] = useState(false);
const togglePopup = () => {
setIsOpen(!isOpen);
};
return (
<div className="KYC">
<div className="page">
<div className="content">
<h1 className="flex">
<i className="fas fa-praying-hands"></i>Welcome
</h1>
<div className="flex-list">
<p className="flex-item">
<i className="far fa-handshake"></i>
<h2>Welcome to our Digital Account Opening platform.</h2>
</p>
<p className="flex-item">
<i className="far fa-thumbs-up"></i>
<h2>Thank you for going green with us and adopting paperless way of money.</h2>
</p>
<p className="flex-item">
<i className="far fa-clock"></i>
<h2>
This service also help to save time so that you have more time to do what is more important to you.{" "}
</h2>
</p>
<div className="Info">
<h1>KYC Form Information</h1>
</div>
<hr />
<div className="account">
<p>Enter Your Account Number for KYC information:</p>
</div>
<form className="form">
<input type="text" placeholder="Account Number" />
<button className="right" onClick={togglePopup}>
<i class="fas fa-arrow-right"></i>
</button>
{isOpen && (
<Popup
content={
<div>
<h1>Sorry!!</h1>
</div>
}
/>
)}
</form>
<Link to="/">
<button className="back">
<i class="fas fa-angle-double-left"></i>
</button>
</Link>
</div>
</div>
</div>
</div>
);
};
export default KYC;
Popup.jsx
import React from "react";
import './Popup.css'
const Popup = (props) => {
return (
<div className="popup-box">
<div className="box">{props.content}</div>
</div>
);
};
export default Popup;
和 KYC.css
.KYC {
background-image: url("../../Assets/customer.png");
background-repeat: no-repeat;
background-position: right;
background-size: auto 90%;
}
.page::before {
content: '';
position: absolute;
right: 0;
top: 0;
width: 30%;
height: 100%;
background: #f939;
clip-path: path('M0 0C35 96 106 177 195 210 315 249 362 290 433 361 567 491 493 597 635 800V0Z')
}
.page::after {
content: '';
position: absolute;
right: 0px;
top: 0px;
width: 30%;
height: 100%;
background: #ee7600;
clip-path: path('M0 0C35 70 180 197 253 211c126 28 145 77 194 167C542 506 493 597 635 800V0Z')
}
.flex {
color: #ee7600;
font-size: 50px;
margin-left: 300px;
display: flex;
gap: 15px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.flex-item {
display: flex;
align-items: center;
gap: 6px;
color: #585858;
margin-left: 100px;
font-weight: lighter;
}
.Info {
color: #585858;
margin-left: 150px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: lighter;
margin-top: 90px;
}
hr {
width: 400px;
border: 2px solid #ee7600;
margin-top: -40px;
margin-left: 27%;
margin-bottom: 60px;
}
input {
padding: 12px 20px;
margin: 8px 5px;
box-sizing: border-box;
border: 2px solid #ee7600;
border-radius: 4px;
margin-left: 150px;
width: 20%
}
.right {
background-color: #ee7600;
cursor: pointer;
margin-left: 10px;
color: white;
font-size: 30px;
border: 6px solid #ee7600;
border-radius: 5px;
padding: 12px 20px
}
.back {
color: white;
background-color: #ee7600;
float: right;
margin-right: 100px;
font-size: 35px;
border: 6px solid #ee7600;
border-radius: 5px;
cursor: pointer;
padding: 15px 25px
}
和 Popup.css
.popup-box {
position: fixed;
background: #00000050;
width: 100%;
height: 100vh;
top: 0;
left: 0;
}
.box {
position: relative;
width: 70%;
margin: 0 auto;
height: auto;
max-height: 70vh;
margin-top: calc(100vh - 85vh - 20px);
background: #fff;
border-radius: 4px;
padding: 20px;
border: 1px solid #999;
overflow: auto;
}
虽然现在窗口显示了,但是当我取消单击按钮后它就消失了?应该做什么才能使窗口保留在那里直到我们需要为止。
最佳答案
使用 React Portal 创建弹出窗口
您的问题是您试图将 Popup 呈现为表单的子元素。
<form className='form'>
...
{isOpen && (
<Popup/>
)}
</form>;
这不会带来您想要的结果。
如果您想在其父组件的 DOM 层次结构之外渲染 React 组件(在 form
外部渲染 Popup
),则需要使用 React Portals 。
关于css - 取消单击按钮后弹出窗口消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70951739/