這篇主要說明如何開發自定義的Component，讓多個頁面都可同時使用，範例程式碼可參考這裡。
最常見的自定義元件大概就是輸入框、讀取動畫或視窗...這類的。因為之前有實作過登入頁，那就以密碼輸入框來教大家如何實作。
因示範專案使用的是MUI，建議各位在開發任何元件前都可確認有沒有官方範例，有的話就可以省下大量的時間去實作。
而這功能確實有找到官方範例，那就可以直接抓程式碼下來使用!
首先先在src/components/text裡新增Password.tsx，並將官方範例貼上去。
Password.tsx
----------------------------------------------------------------------------------------------------------------
import { Visibility, VisibilityOff } from "@mui/icons-material";
import { IconButton, InputAdornment, TextField } from "@mui/material";
import { useState } from "react";
export default function Password(props: passwordProps) {
//顯示密碼Flag
const [showPassword, setShowPassword] = useState(false);
//眼睛點選事件
const handleClickShowPassword = () => setShowPassword((show) => !show);
//取消預設點選事件
const handleMouseDownPassword = (event: React.MouseEvent<HTMLButtonElement>) => {
event.preventDefault();
};
return (
<TextField
error={props.ErrorMsg !== ''}
margin="normal"
required
fullWidth
name={props.Name}//"password"
label={props.Label}//"Password"
id={props.ID}//"password"
autoComplete="current-password"
helperText={props.ErrorMsg !== '' ? props.ErrorMsg : ""}
InputProps={{
type: showPassword ? 'text' : 'password',
endAdornment:
<InputAdornment position="end" >
<IconButton
aria-label="toggle password visibility"
onClick={handleClickShowPassword}
onMouseDown={handleMouseDownPassword}
edge="end"
>
{showPassword ? <VisibilityOff /> : <Visibility />}
</IconButton>
</InputAdornment>
}
}
/>
);
}
interface passwordProps {
ID:string
Name: string
Label:string
ErrorMsg?: string;
}
----------------------------------------------------------------------------------------------------------------
主要定義幾個屬性
ID:元件ID。
Name:元件Name，有包Form的可透過FormData.get({name})抓到值。
Label:元件Label。
ErrorMsg:顯示錯誤訊息。
再將Login的原先密碼欄位改成使用<Password/>
Login.tsx
----------------------------------------------------------------------------------------------------------------
import Password from '../components/text/Password';
省略...
{/*原程式碼*/}
{/*<TextField*/}
{/* error={LoginMsg !== ''}*/}
{/* margin="normal"*/}
{/* required*/}
{/* fullWidth*/}
{/* name="password"*/}
{/* label={t('Login.Password')}*/}
{/* type="password"*/}
{/* id="password"*/}
{/* autoComplete="current-password"*/}
{/* helperText={LoginMsg !== '' ? LoginMsg:""}*/}
{/*/>*/}
<Password ID="password" Name="password" Label={t('Login.Password')} ErrorMsg={LoginMsg} />
省略...
----------------------------------------------------------------------------------------------------------------
這樣就完成囉，未來如果有需要使用密碼欄位就可以同Login頁載入使用，下面Demo一下效果
 |
| 初始為不顯示密碼 |
 |
點選眼睛，就可以看到剛輸入的密碼。
|
看起來功能正常，這樣大家就可以開始來製作屬於自己的元件囉!
這篇功能感覺比前幾篇簡單許多，其實是各位在之前的教學都已經有作過了，讓大家猜猜看是什麼?
公布答案!其實各個頁面也是Component，只是載入的地方在APP.tsx內且透過React-Router去切換掉Content，所以如果有多個地方要顯示同樣的頁面，也可以使用此篇教的方法囉!
