[英]How do I display a component on React Modal
I'm trying to make a Modal to pop-up when click on an individual card, with his specific data and props, but I don't really know how to do that.我正在尝试使用他的特定数据和道具单击单个卡片时弹出一个模态框,但我真的不知道该怎么做。
I'm doing all of this with Next.js for the first time, so if you see any other error please tell me.我第一次用 Next.js 做所有这些,所以如果你看到任何其他错误,请告诉我。 I really want to learn more and improve.
我真的很想学习更多并提高。
This is my /accidents
route - accidents.js
这是我的
/accidents
路线 - accidents.js
export default function Home() {
const router = useRouter()
const [isOpen, setIsOpen] = useState(false)
const [cardsArray, setCards] = useState([])
const addCard = () => {
let force = generateForce(100)
let passagers = generatePassagers()
let speed = generateSpeed()
let msg = helpNeeded(force, passagers)
let newCard = (
<AccidentCard
force={force}
passagers={passagers}
speed={speed}
msg={msg}
/>
)
console.log(newCard)
setCards((arr) => [...arr, newCard])
}
let cardsList = cardsArray.map((card, idx) => (
<div key={idx} id={idx}>
<Link
href={`/accidents/?accidentNum=${idx}`}
as={`/accidents/acc.num.${idx + 1}`}
>
<a>{card}</a>
</Link>
</div>
))
function toggleModal() {
setIsOpen(!isOpen)
}
return (
<div>
<button onClick={addCard}>Add more</button>
<div className={styles.cardsList} onClick={toggleModal}>{cardsList}</div>
<Link href="/">
<a>Go back to Home!</a>
</Link>
<ReactModal isOpen={isOpen} onRequestClose={toggleModal}>
<div>Is MODAL OPEN IT WORKS</div>
<button onClick={toggleModal}>X</button>
</ReactModal>
</div>
)
}
And this is the Card component - AccidentCard.js
这是卡片组件 -
AccidentCard.js
const AccidentCard = (props) => {
return (
<div className={styles.cardContainer}>
<p>Possible casualties: {props.passagers}</p>
<p>Force is: {props.force} Joules</p>
<p>Speed at impact: {props.speed} km/h</p>
<p className={styles.help}>{props.msg}</p>
</div>
)
}
And also have this file to open an individual page for each accident.并且还有这个文件可以为每个事故打开一个单独的页面。
[accidentNum].js
export default function AccidentPage() {
const router = useRouter()
const {accidentNum} = router.query
return <div>I'm the ACCIDENT {accidentNum}</div>
}
I use an inline style for CSS, you can change it.我对 CSS 使用内联样式,您可以更改它。 Codesandbox link
代码沙盒链接
import { useState } from "react";
export default function IndexPage() {
const [modalActive, setModalActive] = useState(false);
return (
<div>
<button onClick={() => setModalActive(true)}>Open Card </button>
{modalActive && (
<ReactModal close={() => setModalActive(false)}>
<div
style={{
width: 100,
height: 100,
backgroundColor: "white",
padding: 20
}}
>
Your Card Component is Here
</div>
</ReactModal>
)}
</div>
);
}
function ReactModal({ children, close }) {
return (
<div
style={{
position: "fixed",
top: 0,
left: 0,
background: "rgba(0, 0, 0, 0.5)",
display: "flex",
flexDirection: "row",
justifyContent: "center",
alignItems: "center"
}}
>
<div
style={{
width: "100vw",
height: "100vh",
position: "relative",
display: "flex",
flexDirection: "row",
justifyContent: "center",
alignItems: "center"
}}
>
{children}
<button
onClick={close}
style={{
position: "absolute",
top: 0,
right: 0,
marginRight: 10,
marginTop: 10
}}
>
Close Modal(Maybe put some close icon)
</button>
</div>
</div>
);
}
I hope it helps.我希望它有所帮助。 Have a great day
祝你有美好的一天
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.