[React]實作自定義的Component(密碼輸入框)

 

這篇主要說明如何開發自定義的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，所以如果有多個地方要顯示同樣的頁面，也可以使用此篇教的方法囉!