使用 useState 製作出一個簡易的彈出視窗(Modal)。
步驟
- 主畫面的 Button
- 點擊之後叫出 Modal
- 關閉 Modal
以下會根據檔案來解說過程。
Code
App.js
在 React 中，預點擊的按鈕前面要加()，代表點擊後才執行後面的 Function。
而這邊叫出 Modal 也十分簡單，就是true跟false轉換。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| import './App.css';
import Popup from './components/Popup';
import { useState } from 'react';
function App() {
const [ButtonPop,setButtonPop] = useState(false);
return (
<div className="App">
<main>
<h1>React Popops</h1>
<br />
<button onClick={()=> setButtonPop(true)}>Open Popup</button>
<Popup trigger={ButtonPop} setButtonPop={setButtonPop}/>
</main>
</div>
);
}
export default App;
|
Popup 元件的判斷就是使用三元運算子來根據true跟false來決定它是否彈出。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| import React from 'react';
import '../App.js'
export default function Popup(props) {
return (props.trigger)?(
<div className="popup">
<div className="popup-inner">
<button className="close-btn" onClick={()=>props.setButtonPop(false)}>close</button>
<h3>My Popup</h3>
<p>This is my time triggered popup.</p>
</div>
</div>
):"";
}
|
App.css
手刻的樣式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
| *{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Fira Sans',sans-serif;
}
main{
padding: 32px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.popup{
position: fixed;
top:0;
left:0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.2);
display: flex;
justify-content: center;
align-items: center;
}
.popup-inner{
position: relative;
padding: 32px;
width: 100%;
max-width: 640px;
background-color: #fff;
}
.popup-inner .close-btn{
position: absolute;
top:16px;
right: 16px;
}
|
結語
因為實習的關係，在學習 React 短短的時間裡，要製作出彈出視窗，雖然此寫法非常的簡易，但對於第一次接觸框架的我來說，剛開始用起來十分的不習慣。過了兩個月後，把此寫法記錄下來才發現 useState 真的太好用了!