สร้างแบบฟอร์ม Next.js ที่ทันสมัยด้วย React Hook Form และ Material UI

Material UI (MUI) เป็นไลบรารีส่วนประกอบยอดนิยมที่ใช้ระบบ Material Design ของ Google มีส่วนประกอบ UI ที่สร้างไว้ล่วงหน้ามากมายที่คุณสามารถใช้เพื่อสร้างอินเทอร์เฟซที่ใช้งานได้และสวยงาม

แม้ว่าจะมีจุดประสงค์เพื่อใช้กับ React เป็นหลัก แต่ Archetype สามารถปรับเปลี่ยนได้และอาจขยายเพื่อรวมเฟรมเวิร์กเพิ่มเติมที่เป็นส่วนหนึ่งของระบบนิเวศ React ที่กว้างขึ้น เช่น Next.js

เริ่มต้นใช้งาน React Hook Form และ Material UI

React Hook Form เป็นไลบรารียอดนิยมที่ให้วิธีง่ายๆ ในการสร้าง จัดการ และตรวจสอบแบบฟอร์ม

ด้วยการผสานรวมองค์ประกอบและสไตล์ UI ของ Material UI’s คุณสามารถสร้างแบบฟอร์มที่ดูดีใช้งานง่าย และใช้การออกแบบที่สอดคล้องกันกับแอปพลิเคชัน 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 นำเสนอยูทิลิตี้ที่มีประโยชน์มากมาย หนึ่งในนั้นคือ hook useForm ที่แพร่หลาย

แนวทางนี้อำนวยความสะดวกในการบริหารสถานะของแบบฟอร์ม การตรวจสอบอินพุต และการส่งโดยปรับปรุงองค์ประกอบหลักของการควบคุมแบบฟอร์ม ซึ่งจะช่วยเพิ่มประสิทธิภาพโดยรวมของกระบวนการดังกล่าว

ในการพัฒนาแบบฟอร์มโดยใช้ hook นี้ คุณจะต้องสร้างไฟล์ใหม่ภายในไดเรกทอรี “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 และเพิ่มอินสแตนซ์ของส่วนประกอบ หน้า ในตำแหน่งที่ต้องการภายในไฟล์นั้น ในขณะเดียวกัน คุณต้องลบโค้ดที่ซ้ำซ้อนหรือไม่เกี่ยวข้องที่เกี่ยวข้องกับฟังก์ชันการทำงานของ Next.js ออกจากไฟล์ดังกล่าว และแทนที่ด้วยเทมเพลตที่ให้มา ซึ่งจะทำให้สามารถผสานการทำงาน onClickOutside ที่กำหนดเองเข้ากับส่วนประกอบอื่นๆ บนหน้าเว็บของคุณได้อย่างราบรื่น โดยไม่ขัดแย้งกับพฤติกรรมเริ่มต้นของ Next.js

 import Form from 'src/components/Form'

export default function Home() {
  return (
    <main >
      <Form/>
    </main>
  )
} 

หากต้องการเริ่มต้นกระบวนการสร้างเว็บแอปพลิเคชัน ให้เปิดใช้งานเซิร์ฟเวอร์การพัฒนา ซึ่งจะสร้างอินเทอร์เฟซที่ใช้งานง่ายซึ่งมีช่องป้อนข้อความสองช่องและปุ่มคำสั่งภายในอินเทอร์เน็ตเบราว์เซอร์ที่คุณต้องการ

การตรวจสอบแบบฟอร์มการจัดการ

รูปลักษณ์ของแบบฟอร์มนั้นน่าดึงดูดสายตา อย่างไรก็ตาม ขณะนี้ยังไม่มีฟังก์ชันการทำงานเนื่องจากไม่ได้ดำเนินการใดๆ ตามการป้อนข้อมูลของผู้ใช้ เพื่อให้แบบฟอร์มใช้งานได้ จำเป็นต้องรวมตรรกะการตรวจสอบที่ช่วยให้มั่นใจในความถูกต้องและความน่าเชื่อถือของข้อมูลที่ผู้ใช้ป้อน ซึ่งสามารถทำได้โดยการใช้ฟังก์ชันยูทิลิตี้ที่เกี่ยวข้องกับแบบฟอร์มซึ่งได้รับการออกแบบมาโดยเฉพาะเพื่อจัดการและตรวจสอบอินพุตของผู้ใช้

แน่นอน! นี่คือตัวอย่างวิธีที่คุณสามารถนำไปใช้ในองค์ประกอบ LoginForm โดยใช้ React hooks และ TypeScript:typescriptimport { useState } จาก’react’;interface LoginFormProps {}const LoginForm=({}: LoginFormProps)=> {const [formStatus, setFormStatus]=useState(’’);//เตรียมข้อมูลเบื้องต้น formStatus เป็น stringconst ว่าง const handleSubmit=(event: React.FormEvent )=> {event.preventDefault();if (!validateCredentials(usernameField.value,passwordField.value)) {alert(“Invalid username or password.” );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} 

เพื่อที่จะรับและตรวจสอบอินพุตของผู้ใช้ เราอาจใช้วิธีการ ลงทะเบียน เพื่อลงทะเบียนองค์ประกอบอินพุตของแบบฟอร์ม ตรวจสอบค่าของพวกเขา และกำหนดเกณฑ์การตรวจสอบ

ฟังก์ชันที่กำหนดยอมรับอินพุตหลายรายการ ซึ่งรวมถึงตัวระบุของฟิลด์อินพุตพร้อมกับอินสแตนซ์พารามิเตอร์การตรวจสอบ ส่วนหลังจะกำหนดเกณฑ์สำหรับการตรวจสอบความถูกต้องของฟิลด์อินพุต ซึ่งประกอบด้วยรูปแบบเฉพาะและความยาวขั้นต่ำ

แน่นอนว่า นี่คือตัวอย่างวิธีรวมส่วนประกอบ “StyledTextField” ในขณะเดียวกันก็รวมข้อมูลโค้ดที่ให้มาด้วย:javascriptimport React from’react’;import { TextField } from’@material-ui/core’;const MyUsername=()=> ( ป้อนชื่อผู้ใช้ของคุณด้านล่าง ไปข้างหน้าและรวมรหัสต่อไปนี้เป็นเสาในช่องชื่อผู้ใช้ );ส่งออก 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'
    },
})} 

แน่นอน! นี่คือตัวอย่างวิธีที่คุณสามารถแก้ไขโค้ดเพื่อใช้ prop ใหม่ที่เรียกว่า addedObject:jsximport React from’react’;//other imports…const PasswordStyledTextField=({ addedObject })=> {//added propconst handleTextChange=(text)=> {//เหมือนกัน//…};return (