Saat lomakkeet kuntoon tällä toiminnallisten ja designkirjastojen yhdistelmällä.

Material UI (MUI) on suosittu komponenttikirjasto, joka toteuttaa Googlen Material Design -järjestelmän. Se tarjoaa laajan valikoiman valmiita käyttöliittymäkomponentteja, joiden avulla voit luoda toimivia ja visuaalisesti houkuttelevia käyttöliittymiä.

Vaikka se on suunniteltu Reactille, voit laajentaa sen ominaisuuksia muihin Reactin ekosysteemin kehyksiin, kuten Next.js: ään.

React Hook -lomakkeen ja materiaalin käyttöliittymän käytön aloittaminen

Reagoi koukkulomake on suosittu kirjasto, joka tarjoaa yksinkertaisen ja ilmoittavan tavan luoda, hallita ja vahvistaa lomakkeita.

Integroimalla Materiaalin käyttöliittymät Käyttöliittymäkomponenttien ja tyylien avulla voit luoda hyvännäköisiä lomakkeita, joita on helppo käyttää, ja soveltaa Next.js-sovellukseesi yhtenäisen ulkoasun.

Aloita rakentamalla Next.js-projekti paikallisesti. Asenna tätä opasta varten Next.js: n uusin versio, joka käyttää sovellushakemistoa.

instagram viewer 
npx create-next-app@latest next-project --app

Asenna seuraavaksi nämä paketit projektiisi:

npm install react-hook-form @mui/material @mui/system @emotion/react @emotion/styled

Tässä on esikatselu siitä, mitä aiot rakentaa:

Löydät tämän projektin koodin tästä GitHub arkisto.

Lomakkeiden luominen ja muotoilu

React Hook Form tarjoaa useita aputoimintoja, mukaan lukien käyttölomake koukku.

Tämä koukku virtaviivaistaa lomakkeen tilan käsittelyä, syötteiden validointia ja lähettämistä, mikä yksinkertaistaa lomakkeiden hallinnan perusnäkökohtia.

Jos haluat luoda lomakkeen, joka käyttää tätä koukkua, lisää seuraava koodi uuteen tiedostoon, src/components/form.js.

Lisää ensin tarvittavat tuonnit React Hook Form- ja MUI-paketteja varten:

"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 tarjoaa kokoelman käyttövalmiita käyttöliittymäkomponentteja, joita voit mukauttaa edelleen antamalla tyylirekvisiitta.

Jos kuitenkin haluat enemmän joustavuutta ja hallintaa käyttöliittymän suunnitteluun, voit käyttää tyyliteltyä menetelmää käyttöliittymäelementtien tyylistämiseen CSS-ominaisuuksilla. Tässä tapauksessa voit muotoilla lomakkeen pääkomponentit: pääsäiliön, itse lomakkeen ja syöttötekstikentät.

Lisää tämä koodi suoraan tuontien alle:

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%',
});

Modulaarisen koodikannan ylläpitäminen on tärkeää kehityksessä. Tästä syystä sinun tulee määrittää ja tyylittää mukautettuja komponentteja erillisissä tiedostoissa sen sijaan, että koota kaikki koodi yhdeksi tiedostoksi.

Tällä tavalla voit helposti tuoda ja käyttää näitä komponentteja sovelluksesi eri osissa, mikä tekee koodistasi organisoidumman ja ylläpidettävämmän.

Määritä nyt toiminnallinen komponentti:

exportdefaultfunctionForm() {
const { register, handleSubmit, formState: { errors } } = useForm();

return (
 <>


 label="Username"
 type="text"
 />
 label="Password"
 type="password"
 />
 type="submit"
 variant="contained"
 color="primary"
 margin="5px"
 > Submit </MuiButton>
 </StyledForm>
 </FormContainer>
 </>
 );
}

Tuo lopuksi tämä komponentti tietokoneellesi app/page.js tiedosto. Poista kaikki yleiskoodi Next.js-koodi ja päivitä se seuraavasti:

import Form from'src/components/Form'
exportdefaultfunctionHome() {
return (



 </main>
 )
}

Käynnistä kehityspalvelin, ja sinun pitäisi nähdä selaimessasi peruslomake, jossa on kaksi syöttökenttää ja lähetyspainike.

Lomakkeen validoinnin käsittely

Muoto näyttää hyvältä, mutta se ei tee vielä mitään. Jotta se toimisi, sinun on lisättävä vahvistuskoodi. käyttölomake hook-aputoiminnot ovat hyödyllisiä hallinnassa ja vahvistaa käyttäjän syötteet.

Määritä ensin seuraava tilamuuttuja hallitaksesi nykyistä lomakkeen tilaa sen mukaan, onko käyttäjä antanut oikeat tunnistetiedot. Lisää tämä koodi toiminnallisen komponentin sisään:

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

Luo seuraavaksi käsittelijätoiminto valtuustietojen vahvistamiseksi. Tämä toiminto simuloi HTTP API -pyyntöä, joka yleensä tapahtuu, kun asiakassovellukset ovat vuorovaikutuksessa taustatodennussovellusliittymän kanssa.

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

Lisää onClick-tapahtumakäsittelijätoiminto painikekomponenttiin – välitä se ehdotuksena – käynnistääksesi onSubmit-toiminnon, kun käyttäjä napsauttaa lähetyspainiketta.

onClick={handleSubmit(onSubmit)}

Arvo formStatus tilamuuttuja on tärkeä, koska se määrittää, kuinka annat palautetta käyttäjälle. Jos käyttäjä antaa oikeat tunnistetiedot, saatat näyttää onnistumisviestin. Jos Next.js-sovelluksessasi oli muita sivuja, voit ohjata ne toiselle sivulle.

Sinun tulee myös antaa asianmukaista palautetta, jos tunnistetiedot ovat väärät. Material UI tarjoaa loistavan palautekomponentin, jota voit käyttää rinnalla Reactin ehdollinen renderöintitekniikka ilmoittaa käyttäjälle formStatus-arvon perusteella.

Voit tehdä tämän lisäämällä seuraavan koodin suoraan koodin alle StyledForm avausmerkki.

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

Nyt voit kaapata ja vahvistaa käyttäjän syötteen käyttämällä rekisteröidy toiminto rekisteröi lomakkeen syöttökentät, seuraa sen arvoja ja määrittää vahvistussäännöt.

Tämä funktio ottaa useita argumentteja, mukaan lukien syöttökentän nimen ja validointiparametriobjektin. Tämä objekti määrittää syöttökentän vahvistussäännöt, kuten tietyn kuvion ja vähimmäispituuden.

Mene eteenpäin ja sisällytä seuraava koodi käyttäjätunnukseen Tyylitelty tekstikenttä komponentti.

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

Lisää nyt seuraava objekti rekvisiittaksi SalasanaTyylitelty tekstikenttä komponentti.

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

Lisää seuraava koodi käyttäjänimen syöttökentän alle antaaksesi visuaalista palautetta syöttövaatimuksista.

Tämä koodi laukaisee hälytyksen, jossa on virheilmoitus, joka ilmoittaa käyttäjälle vaatimuksista varmistaakseen, että hän korjaa mahdolliset virheet ennen lomakkeen lähettämistä.

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

Lisää lopuksi samanlainen koodi salasanan syöttötekstikentän alle:

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

Mahtava! Näillä muutoksilla sinulla pitäisi olla visuaalisesti houkutteleva, toimiva muoto, joka on tehty React Hook Form - ja Material UI -käyttöliittymällä.

Paranna Next.js-kehitystäsi asiakaspuolen kirjastoilla

Material UI ja React Hook Form ovat vain kaksi esimerkkiä monista upeista asiakaspuolen kirjastoista, joita voit käyttää Next.js-käyttöliittymän kehittämisen nopeuttamiseen.

Asiakaspuolen kirjastot tarjoavat erilaisia ​​tuotantovalmiita ominaisuuksia ja valmiita komponentteja, jotka voivat auttaa sinua rakentamaan parempia käyttöliittymäsovelluksia nopeammin ja tehokkaammin.