Τακτοποιήστε τις φόρμες σας με αυτόν τον συνδυασμό λειτουργικών και σχεδιαστικών βιβλιοθηκών.

Το Material UI (MUI) είναι μια δημοφιλής βιβλιοθήκη στοιχείων που εφαρμόζει το σύστημα Σχεδιασμού Υλικού της Google. Παρέχει ένα ευρύ φάσμα προ-ενσωματωμένων στοιχείων διεπαφής χρήστη που μπορείτε να χρησιμοποιήσετε για να δημιουργήσετε λειτουργικές και οπτικά ελκυστικές διεπαφές.

Παρόλο που έχει σχεδιαστεί για το React, μπορείτε να επεκτείνετε τις δυνατότητές του σε άλλα πλαίσια εντός του οικοσυστήματος του React, όπως το Next.js.

Ξεκινώντας με το React Hook Form and Material UI

React Hook Form είναι μια δημοφιλής βιβλιοθήκη που παρέχει έναν απλό και δηλωτικό τρόπο δημιουργίας, διαχείρισης και επικύρωσης φορμών.

Με την ενσωμάτωση Διεπαφή χρήστη υλικού Τα στοιχεία και τα στυλ διεπαφής χρήστη, μπορείτε να δημιουργήσετε όμορφες φόρμες που είναι εύχρηστες και να εφαρμόσετε μια συνεπή σχεδίαση στην εφαρμογή Next.js.

Για να ξεκινήσετε, δημιουργήστε ένα έργο Next.js τοπικά. Για τους σκοπούς αυτού του οδηγού, εγκαταστήστε το την τελευταία έκδοση του Next.js που χρησιμοποιεί τον κατάλογο της εφαρμογής.

instagram viewer 
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 παρέχει μια συλλογή από έτοιμα προς χρήση στοιχεία διεπαφής χρήστη που μπορείτε να προσαρμόσετε περαιτέρω περνώντας στηρίγματα styling.

Ωστόσο, εάν θέλετε περισσότερη ευελιξία και έλεγχο στη σχεδίαση διεπαφής χρήστη, μπορείτε να επιλέξετε να χρησιμοποιήσετε τη μέθοδο στυλ για να διαμορφώσετε τα στοιχεία διεπαφής χρήστη με ιδιότητες 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%',
});

Η διατήρηση μιας αρθρωτής βάσης κωδικών είναι σημαντική στην ανάπτυξη. Για αυτόν τον λόγο, αντί να συγκεντρώνετε όλο τον κώδικα σε ένα μόνο αρχείο, θα πρέπει να ορίσετε και να διαμορφώσετε προσαρμοσμένα στοιχεία σε ξεχωριστά αρχεία.

Με αυτόν τον τρόπο, μπορείτε εύκολα να εισαγάγετε και να χρησιμοποιήσετε αυτά τα στοιχεία σε διάφορα μέρη της εφαρμογής σας, κάνοντας τον κώδικά σας πιο οργανωμένο και διατηρήσιμο.

Τώρα, ορίστε το λειτουργικό στοιχείο:

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>
 </>
 );
}

Τέλος, εισαγάγετε αυτό το στοιχείο στο δικό σας app/page.js αρχείο. Διαγράψτε όλο τον κώδικα του boilerplate Next.js και ενημερώστε τον με τα εξής:

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



 </main>
 )
}

Ξεκινήστε τον διακομιστή ανάπτυξης και θα πρέπει να δείτε μια βασική φόρμα με δύο πεδία εισαγωγής και ένα κουμπί υποβολής στο πρόγραμμα περιήγησής σας.

Επικύρωση φόρμας χειρισμού

Η φόρμα φαίνεται υπέροχη, αλλά δεν κάνει τίποτα ακόμα. Για να το κάνετε λειτουργικό, πρέπει να προσθέσετε κάποιο κωδικό επικύρωσης. useForm Οι βοηθητικές λειτουργίες του γάντζου θα σας φανούν χρήσιμες κατά τη διαχείριση και επικύρωση των εισροών του χρήστη.

Αρχικά, ορίστε την ακόλουθη μεταβλητή κατάστασης για να διαχειριστείτε την τρέχουσα κατάσταση της φόρμας, ανάλογα με το αν ένας χρήστης έχει παράσχει τα σωστά διαπιστευτήρια. Προσθέστε αυτόν τον κώδικα μέσα στο λειτουργικό στοιχείο:

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

Στη συνέχεια, δημιουργήστε μια συνάρτηση χειριστή για να επικυρώσετε τα διαπιστευτήρια. Αυτή η συνάρτηση θα προσομοιώσει ένα αίτημα API HTTP που εμφανίζεται συνήθως όταν οι εφαρμογές πελάτη αλληλεπιδρούν με ένα API ελέγχου ταυτότητας backend.

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)}

Η αξία του φόρμαΚατάσταση Η μεταβλητή κατάσταση είναι σημαντική γιατί θα καθορίσει τον τρόπο με τον οποίο παρέχετε σχόλια στον χρήστη. Εάν ο χρήστης εισάγει τα σωστά διαπιστευτήρια, ενδέχεται να εμφανιστεί ένα μήνυμα επιτυχίας. Εάν είχατε άλλες σελίδες στην εφαρμογή Next.js, θα μπορούσατε να τις ανακατευθύνετε σε διαφορετική σελίδα.

Θα πρέπει επίσης να παρέχετε τα κατάλληλα σχόλια εάν τα διαπιστευτήρια είναι λανθασμένα. Το Material UI προσφέρει ένα εξαιρετικό στοιχείο ανατροφοδότησης που μπορείτε να χρησιμοποιήσετε παράλληλα Η τεχνική απόδοσης υπό όρους του React για ενημέρωση του χρήστη, με βάση την τιμή του formStatus.

Για να το κάνετε αυτό, προσθέστε τον παρακάτω κώδικα ακριβώς κάτω από το StyledForm ετικέτα ανοίγματος.

{formStatus.success? (
"success">Form submitted successfully</Alert>
): formStatus.error? (
"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 && <Alertseverity="error">{errors.username.message}Alert>}

Τέλος, συμπεριλάβετε παρόμοιο κώδικα ακριβώς κάτω από το πεδίο κειμένου εισαγωγής κωδικού πρόσβασης:

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

Φοβερός! Με αυτές τις αλλαγές, θα πρέπει να έχετε μια οπτικά ελκυστική, λειτουργική φόρμα φτιαγμένη με React Hook Form και Material UI.

Βελτιώστε την ανάπτυξη Next.js σας με βιβλιοθήκες από την πλευρά του πελάτη

Το Material UI και το React Hook Form είναι μόνο δύο παραδείγματα των πολλών εξαιρετικών βιβλιοθηκών από την πλευρά του πελάτη που μπορείτε να χρησιμοποιήσετε για να επιταχύνετε την ανάπτυξη του frontend του Next.js.

Οι βιβλιοθήκες από την πλευρά του πελάτη παρέχουν μια ποικιλία δυνατοτήτων που είναι έτοιμες για παραγωγή και προκατασκευασμένα στοιχεία που μπορούν να σας βοηθήσουν να δημιουργήσετε καλύτερες εφαρμογές front-end πιο γρήγορα και αποτελεσματικά.