Ստեղծեք նորաձև Next.js ձևեր React Hook ձևով և նյութի միջերեսով

Ձեր ձևերը կարգի բերեք ֆունկցիոնալ և դիզայներական գրադարանների այս համադրությամբ:

Material UI (MUI) բաղադրիչի հանրաճանաչ գրադարան է, որն իրականացնում է Google-ի Նյութերի դիզայնի համակարգը: Այն ապահովում է նախապես կառուցված UI բաղադրիչների լայն շրջանակ, որոնք կարող եք օգտագործել ֆունկցիոնալ և տեսողականորեն գրավիչ միջերեսներ ստեղծելու համար:

Թեև այն նախատեսված է React-ի համար, դուք կարող եք ընդլայնել դրա հնարավորությունները React-ի էկոհամակարգի այլ շրջանակների վրա, օրինակ՝ Next.js-ի:

Ինչպես սկսել React Hook Form-ի և Material UI-ի հետ

React Hook Form-ը հանրաճանաչ գրադարան է, որն ապահովում է ձևեր ստեղծելու, կառավարելու և վավերացնելու պարզ և դեկլարատիվ եղանակ:

Ինտեգրելով Material UI-ի UI բաղադրիչներն ու ոճերը՝ դուք կարող եք ստեղծել գեղեցիկ ձևեր, որոնք հեշտ է օգտագործել, և հետևողական ձևավորում կիրառել ձեր 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-ի և MUI փաթեթների համար.

"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-ն տրամադրում է օգտագործման համար պատրաստի UI բաղադրիչների հավաքածու, որոնք կարող եք հետագայում հարմարեցնել՝ փոխանցելով ոճավորման պարագաներ:

Այնուամենայնիվ, եթե ցանկանում եք ավելի շատ ճկունություն և վերահսկողություն UI դիզայնի վրա, կարող եք ընտրել ոճավորված մեթոդը՝ ձեր UI տարրերը CSS հատկություններով ոճավորելու համար: Այս դեպքում դուք կարող եք ոճավորել ձևի հիմնական բաղադրիչները՝ հիմնական կոնտեյները, ինքնին ձևը և մուտքագրված տեքստային դաշտերը:

Ներմուծման անմիջապես ներքեւում ավելացրեք այս կոդը.

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 կոդը և թարմացրեք այն հետևյալով.

import Form from 'src/components/Form'
export default function Home() {
  return (
    <main >
      <Form />
    </main>
  )
}

Գործարկեք զարգացման սերվերը, և դուք պետք է տեսնեք հիմնական ձևը երկու մուտքագրման դաշտերով և ուղարկելու կոճակով ձեր բրաուզերում:

Կառավարման ձևի վավերացում

Ձևը հիանալի տեսք ունի, բայց դեռ ոչինչ չի անում: Այն գործունակ դարձնելու համար անհրաժեշտ է ավելացնել վավերացման որոշ կոդ: useForm hook utility ֆունկցիաները օգտակար կլինեն օգտատիրոջ մուտքերը կառավարելիս և վավերացնելիս:

Նախ, սահմանեք հետևյալ վիճակի փոփոխականը՝ ընթացիկ ձևի կարգավիճակը կառավարելու համար՝ կախված նրանից, թե արդյոք օգտվողը տրամադրել է ճիշտ հավատարմագրերը: Ավելացրեք այս կոդը ֆունկցիոնալ բաղադրիչի ներսում.

const [formStatus, setFormStatus] = useState({ success: false, error: '' });

Հաջորդը, ստեղծեք կարգավորիչի գործառույթ՝ հավատարմագրերը հաստատելու համար: Այս գործառույթը կսիմուլյացի HTTP API-ի հարցումը, որը սովորաբար տեղի է ունենում, երբ հաճախորդի հավելվածները փոխազդում են հետին մասի նույնականացման API-ի հետ:

const onSubmit = (data) => {
    if (data.username === 'testuser' && data.password === 'password123') {
        setFormStatus({ success: true, error: '' });
    } else {
        setFormStatus({ success: false, error: 'Invalid username or password' });
    }
};

Կոճակի բաղադրիչին ավելացրեք onClick իրադարձությունների մշակման գործառույթը՝ այն փոխանցելով որպես հենարան, որպեսզի գործարկվի onSubmit ֆունկցիան, երբ օգտատերը սեղմում է ուղարկել կոճակը:

onClick={handleSubmit(onSubmit)}

formStatus վիճակի փոփոխականի արժեքը կարևոր է, քանի որ այն կորոշի, թե ինչպես եք հետադարձ կապ տրամադրում օգտատիրոջը: Եթե օգտվողը մուտքագրի ճիշտ հավատարմագրերը, դուք կարող եք ցույց տալ հաջողության հաղորդագրություն: Եթե ունեք այլ էջեր ձեր Next.js հավելվածում, կարող եք դրանք վերահղել այլ էջ:

Դուք նաև պետք է համապատասխան կարծիք ներկայացնեք, եթե հավատարմագրերը սխալ են: Material UI-ն առաջարկում է հետադարձ կապի հիանալի բաղադրիչ, որը կարող եք օգտագործել React-ի պայմանական մատուցման տեխնիկայի հետ մեկտեղ՝ օգտվողին տեղեկացնելու համար՝ հիմնվելով formStatus-ի արժեքի վրա:

Դա անելու համար ավելացրեք հետևյալ կոդը հենց StyledForm բացվող պիտակի տակ:

{formStatus.success ? (
    <Alert severity="success">Form submitted successfully</Alert>
) : formStatus.error ? (
    <Alert severity="error">{formStatus.error}</Alert>
) : null}

Այժմ, օգտվողի մուտքագրումը գրավելու և վավերացնելու համար կարող եք օգտագործել Գրանցվել ֆունկցիան՝ գրանցելու ձևի մուտքագրման դաշտերը, հետևելու դրա արժեքներին և նշելու վավերացման կանոնները:

Այս ֆունկցիան վերցնում է մի քանի արգումենտ, ներառյալ մուտքագրման դաշտի անվանումը և վավերացման պարամետրերի օբյեկտը: Այս օբյեկտը սահմանում է մուտքագրման դաշտի վավերացման կանոնները, ինչպիսիք են հատուկ օրինակը և նվազագույն երկարությունը:

Շարունակեք և ներառեք հետևյալ կոդը որպես հենարան StyledTextField բաղադրիչում:

{...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'
    },
})}

Այժմ ավելացրեք հետևյալ օբյեկտը որպես հենարան գաղտնաբառ StyledTextField բաղադրիչում:

{...register('password', {
    required: 'Password required',
    minLength: {
        value: 8,
        message: 'Password must be at least 8 characters'
    },
})}

Ավելացրեք հետևյալ կոդը օգտանունի մուտքագրման դաշտի տակ՝ մուտքագրման պահանջների վերաբերյալ տեսողական արձագանք տալու համար:

Այս կոդը կգործարկի ծանուցում սխալի հաղորդագրությամբ՝ օգտատիրոջը տեղեկացնելու պահանջների մասին, ապահովելու համար, որ նրանք ուղղում են սխալները նախքան ձևը ներկայացնելը:

{errors.username && <Alert severity="error">{errors.username.message}</Alert>}

Վերջապես, ներառեք նմանատիպ կոդը հենց գաղտնաբառի մուտքագրման տեքստային դաշտի տակ.

{errors.password && <Alert severity="error">{errors.password.message}</Alert>}

Հիանալի! Այս փոփոխություններով դուք պետք է ունենաք տեսողականորեն գրավիչ, ֆունկցիոնալ ձև՝ պատրաստված React Hook Form-ով և Material UI-ով:

Բարելավեք ձեր Next.js-ի զարգացումը հաճախորդի կողմից օգտագործվող գրադարանների միջոցով

Material UI-ը և React Hook Form-ը հաճախորդի կողմի բազմաթիվ հիանալի գրադարանների ընդամենը երկու օրինակ են, որոնք կարող եք օգտագործել Next.js-ի ճակատային մասի զարգացումն արագացնելու համար:

Հաճախորդի կողմի գրադարաններն ապահովում են արտադրության համար պատրաստի մի շարք առանձնահատկություններ և նախապես կառուցված բաղադրիչներ, որոնք կարող են օգնել ձեզ ավելի արագ և արդյունավետ կերպով ստեղծել ավելի լավ առջևի հավելվածներ: