使用 React Hook 表單和 Material UI 建立時尚的 Next.js 表單
Material UI (MUI) 是一個受歡迎的元件庫，它實作了 Google 的 Material Design 系統。它提供了各種預先建構的 UI 元件，您可以使用它們來創建實用且具有視覺吸引力的介面。
雖然 Archetype 主要用於與 React 一起使用，但它具有適應性，並且可以擴展以合併屬於更廣泛的 React 生態系統一部分的其他框架，例如 Next.js。
React Hook Form 和 Material UI 入門
React Hook Form 是一個受歡迎的函式庫，它提供了一種簡單的宣告式方式來建立、管理和驗證表單。
透過整合 Material UI UI 元件和樣式，您可以建立美觀且易於使用的表單，並將一致的設計套用至您的 Next.js 應用程式。
首先，您可以透過使用 Next.js 框架建立新專案來為 Next.js 應用程式設定本機開發環境。為此，建議您下載並安裝最新版本的 Next.js，它將使用「App」目錄作為其基礎。
npx create-next-app@latest next-project --app
接下來，在您的專案中安裝這些套件:
npm install react-hook-form @mui/material @mui/system @emotion/react @emotion/styled
本文提供了將要建立的結構的一瞥，以雄辯的方式涵蓋了其複雜性和特殊性。
上述專案的原始程式碼可透過其對應的 GitHub 儲存庫存取。
建立表單並設定樣式
React Hook Form 提供了一系列有用的實用程序，其中包括流行的 useForm 鉤子。
這種方法透過簡化表單控制的核心元素，促進表單狀態、輸入驗證和提交的管理，從而提高此類流程的整體效率。
為了使用此鉤子開發表單，您需要在“src/components”目錄中建立新檔案並將其指定為“form.js”。
若要將 React Hook Form 和 Material-UI 程式庫的必要相依性合併到您的專案中，您必須先以下列方式匯入它們:
"use client"
import React, {useState} from 'react';
import { useForm } from 'react-hook-form';
import { TextField, Button as MuiButton, Alert } from '@mui/material';
import { styled } from '@mui/system';
MUI 提供了一系列預製的使用者介面元素，可以透過應用風格屬性來自訂這些元素。這種多功能性允許進行個性化調整，以滿足特定的設計要求。
然而，為了增加使用者介面配置的多功能性和控制權，人們可以選擇採用樣式化方法，以便應用 CSS 屬性來客製化各種 UI 元素的外觀。透過這樣做，可以修改表單的主要組成部分，例如其主體外殼、表單本身和各個字元輸入欄位。
在導入的正下方加入以下程式碼:
const FormContainer = styled('div')({
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
height: '100vh',
});
const StyledForm = styled('form')({
width: '80%',
maxWidth: '400px',
padding: '20px',
borderRadius: '10px',
border: '2px solid #1E3A8A',
boxShadow: '0px 0px 10px rgba(0, 0, 0, 0.2)',
backgroundColor: '#ffffff',
textAlign: 'center',
});
const StyledTextField = styled(TextField)({
marginBottom: '16px',
width: '100%',
});
在軟體開發過程中確保模組化架構至關重要。為了實現這一目標，建議將程式碼分散到多個文件中，而不是將所有內容合併到一個文件中。這種方法可以在處理應用程式的不同方面時提供更好的組織性和靈活性。
透過採用這種方法，人們可以在程式的各個方面無縫整合和利用這些元素，從而形成精簡且易於管理的程式碼庫。
現在，定義功能元件:
export default function Form() {
const { register, handleSubmit, formState: { errors } } = useForm();
return (
<>
<FormContainer>
<StyledForm>
<StyledTextField
label="Username"
type="text"/>
<StyledTextField
label="Password"
type="password"/>
<MuiButton
type="submit"
variant="contained"
color="primary"
margin="5px"
> Submit </MuiButton>
</StyledForm>
</FormContainer>
</>
);
}
事實上，一旦您建立了前面討論的「頁面」元件，您將需要透過將其匯入專案中的相關頁面或模組來將其整合到您的應用程式中。具體來說，您應該找到管理網站導航的適當文件，例如“app/page.js”，並在該文件中的所需位置添加“Page”元件的實例。同時，您必須從上述文件中刪除與 Next.js 功能相關的任何冗餘或不相關的程式碼，並將其替換為提供的範本。這將允許自訂「onClickOutside」行為與網頁上的其他元件無縫集成，而不會與預設的 Next.js 行為發生衝突。
import Form from 'src/components/Form'
export default function Home() {
return (
<main >
<Form/>
</main>
)
}
要啟動建立 Web 應用程式的過程，請啟動開發伺服器，這將產生一個直覺的介面，其中包含兩個文字輸入欄位以及您首選的網路瀏覽器中的命令按鈕。
處理表單驗證
表格的外觀具有視覺吸引力；但是，它目前缺乏功能，因為它不根據用戶輸入執行任何操作。為了使表單變得可操作，有必要合併驗證邏輯，以確保使用者輸入的資料的準確性和可靠性。這可以透過利用專門為管理和驗證使用者輸入而設計的與表單相關的實用功能來實現。
當然！以下是如何使用 React hooks 和 TypeScript 在「LoginForm」元件中實現此功能的範例:typescriptimport { useState } from’react’;interface LoginFormProps {}const LoginForm=({}: LoginFormProps)=> {const [formStatus, setFormStatus ]=useState(’’);//將formStatus 初始化為空字串const handleSubmit=(event: React.FormEvent )=> {event.preventDefault();if (!validateCredentials(usernameField.value,passwordField.value)) {alert(「無效的使用者名稱或密碼。” );return;}setFormStatus(‘已提交’);//設定表單
const [formStatus, setFormStatus] = useState({ success: false, error: '' });
接下來，我們將開發一個負責驗證使用者憑證的功能實體。此元件將模擬前端應用程式和後端身份驗證服務之間的介面期間常見的 HTTP 事務。
const onSubmit = (data) => {
if (data.username === 'testuser' && data.password === 'password123') {
setFormStatus({ success: true, error: '' });
} else {
setFormStatus({ success: false, error: 'Invalid username or password' });
}
};
透過將其指定作為參數傳遞給所述元件，合併在與指定元素互動時觸發的函數實例，以在互動時引發與指定操作相關聯的所需回應。
onClick={handleSubmit(onSubmit)}
「formStatus」狀態變數的重要性在於它能夠決定將回饋傳達給最終使用者的方式。如果使用者提供了有效的認證訊息，則可以選擇顯示表示成功的訊息。此外，如果應用程式在 Next.js 框架內包含其他頁面，則重定向到替代頁面對於使用者來說是一個可行的選擇。
當身分驗證憑證不正確時，提供建設性回饋非常重要。幸運的是，Material-UI 提供了一個出色的回饋元件，可以與 React 的條件渲染功能結合使用，根據 formStatus 變數的值向使用者傳達表單提交流程的狀態。
為了實現此功能，請將上述程式碼直接插入到開始```標籤下方。
{formStatus.success ? (
<Alert severity="success">Form submitted successfully</Alert>
) : formStatus.error ? (
<Alert severity="error">{formStatus.error}</Alert>
) : null}
為了取得和驗證使用者輸入，可以使用「register」方法來註冊表單的輸入元素、監視它們的值並定義驗證標準。
給定的函數接受多個輸入，其中包括輸入欄位的識別碼以及驗證參數實例。後者描述了驗證輸入欄位的標準，包括特定模式和最小長度。
當然，這裡有一個範例，說明如何合併「StyledTextField」元件，同時也包含提供的程式碼片段:javascriptimport React from’react’;import { TextField } from’@material-ui/core’;const MyUsername=()=> (在下面輸入您的使用者名稱繼續並在使用者名字段中包含以下程式碼作為道具。);export default MyUsername;
{...register('username', {
required: 'Username required',
pattern: {
value:/^[a-zA-Z0-9_.-]*$/,
message: 'Invalid characters used'
},
minLength: {
value: 6,
message: 'Username must be at least 6 characters'
},
})}
當然！以下是如何修改程式碼以使用名為 additionalObject 的新 prop 的範例:jsximport React from’react’;//其他導入…const PasswordStyledTextField=({additionalObject })=> {//新增的 propconst handleTextChange=(text)=> {//相同//…};return (