Xây dựng các biểu mẫu Next.js sành điệu với biểu mẫu React Hook và Material UI
Material UI (MUI) là một thư viện thành phần phổ biến triển khai hệ thống Material Design của Google. Nó cung cấp một loạt các thành phần UI dựng sẵn mà bạn có thể sử dụng để tạo các giao diện có chức năng và hấp dẫn về mặt hình ảnh.
Mặc dù chủ yếu được thiết kế để sử dụng với React, Archetype có khả năng thích ứng và có thể được mở rộng để kết hợp các khung bổ sung là một phần của hệ sinh thái React rộng hơn, chẳng hạn như Next.js.
Bắt đầu với React Hook Form và Material UI
React Hook Form là một thư viện phổ biến cung cấp một cách đơn giản và mang tính khai báo để tạo, quản lý và xác thực các biểu mẫu.
Bằng cách tích hợp các thành phần và kiểu giao diện người dùng của Material UI, bạn có thể tạo các biểu mẫu đẹp mắt, dễ sử dụng và áp dụng thiết kế nhất quán cho ứng dụng Next.js của mình.
Để bắt đầu, bạn có thể thiết lập môi trường phát triển cục bộ cho ứng dụng Next.js của mình bằng cách tạo một dự án mới bằng khung Next.js. Để làm như vậy, bạn nên tải xuống và cài đặt phiên bản Next.js mới nhất, phiên bản này sẽ sử dụng thư mục “Ứng dụng” làm cơ sở.
npx create-next-app@latest next-project --app
Tiếp theo, cài đặt các gói này trong dự án của bạn:
npm install react-hook-form @mui/material @mui/system @emotion/react @emotion/styled
Ở đây cung cấp một cái nhìn thoáng qua về cấu trúc sẽ được dựng lên, bao gồm những điểm phức tạp và đặc thù của nó một cách hùng hồn.
Mã nguồn của dự án nói trên có thể truy cập được thông qua kho lưu trữ GitHub tương ứng.
Tạo và tạo kiểu cho biểu mẫu
React Hook Form cung cấp một loạt các tiện ích hữu ích, trong số đó có hook useForm phổ biến.
Cách tiếp cận này tạo điều kiện thuận lợi cho việc quản lý trạng thái biểu mẫu, xác minh đầu vào và gửi bằng cách hợp lý hóa các yếu tố cốt lõi của kiểm soát biểu mẫu, từ đó nâng cao hiệu quả tổng thể của các quy trình đó.
Để phát triển một biểu mẫu sử dụng hook này, bạn phải thiết lập một tệp mới trong thư mục “src/comComponents” và chỉ định nó là “form.js”.
Để kết hợp các phần phụ thuộc cần thiết cho thư viện React Hook Form và Material-UI trong dự án của bạn, trước tiên bạn phải nhập chúng như sau:
"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 cung cấp một loạt các thành phần giao diện người dùng đúc sẵn, có thể được điều chỉnh thông qua việc áp dụng các đặc tính phong cách. Tính linh hoạt này cho phép cá nhân hóa sự thích ứng để phù hợp với yêu cầu thiết kế cụ thể.
Tuy nhiên, để tăng tính linh hoạt và chiếm ưu thế đối với cấu hình giao diện người dùng, người ta có thể chọn sử dụng cách tiếp cận theo kiểu để áp dụng các thuộc tính CSS nhằm tùy chỉnh giao diện của các thành phần UI khác nhau. Bằng cách đó, có thể sửa đổi các thành phần chính của biểu mẫu, chẳng hạn như phần bao quanh chính, chính biểu mẫu và các trường nhập ký tự riêng lẻ.
Ngay bên dưới phần nhập, thêm mã này:
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%',
});
Đảm bảo kiến trúc mô-đun là rất quan trọng trong quá trình phát triển phần mềm. Để đạt được mục tiêu này, bạn nên phân đoạn mã của mình thành nhiều tệp, thay vì hợp nhất mọi thứ trong một tệp duy nhất. Cách tiếp cận này cho phép tổ chức tốt hơn và linh hoạt hơn khi làm việc với các khía cạnh khác nhau của ứng dụng.
Bằng cách sử dụng phương pháp này, người ta có thể tích hợp và sử dụng liền mạch các yếu tố này trong các khía cạnh khác nhau của chương trình, tạo ra một cơ sở mã hợp lý và dễ quản lý.
Bây giờ, xác định thành phần chức năng:
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>
</>
);
}
Thật vậy, khi bạn đã tạo thành phần Trang như đã thảo luận trước đó, bạn sẽ cần tích hợp nó vào ứng dụng của mình bằng cách nhập nó vào một trang hoặc mô-đun có liên quan trong dự án của bạn. Cụ thể, bạn nên tìm tệp thích hợp nơi quản lý điều hướng cho trang web của bạn, chẳng hạn như app/page.js và thêm một phiên bản của thành phần Trang tại vị trí mong muốn trong tệp đó. Đồng thời, bạn phải xóa mọi mã thừa hoặc không liên quan liên quan đến chức năng Next.js khỏi tệp nói trên và thay thế bằng mẫu được cung cấp. Điều này sẽ cho phép tích hợp liền mạch hành vi onClickOutside tùy chỉnh cùng với các thành phần khác trên trang web của bạn mà không xung đột với hành vi Next.js mặc định.
import Form from 'src/components/Form'
export default function Home() {
return (
<main >
<Form/>
</main>
)
}
Để bắt đầu quá trình tạo ứng dụng web, hãy kích hoạt máy chủ phát triển, máy chủ này sẽ tạo giao diện trực quan bao gồm hai trường nhập văn bản cũng như nút lệnh trong trình duyệt internet ưa thích của bạn.
Xử lý xác thực biểu mẫu
Sự xuất hiện của hình thức hấp dẫn trực quan; tuy nhiên, hiện tại nó thiếu chức năng vì không thực hiện bất kỳ hành động nào dựa trên thông tin đầu vào của người dùng. Để biểu mẫu có thể hoạt động, cần phải kết hợp logic xác thực để đảm bảo tính chính xác và độ tin cậy của dữ liệu do người dùng nhập vào. Điều này có thể đạt được thông qua việc sử dụng các chức năng tiện ích liên quan đến biểu mẫu được thiết kế đặc biệt để quản lý và xác thực thông tin đầu vào của người dùng.
Chắc chắn! Đây là ví dụ về cách bạn có thể triển khai điều này trong thành phần LoginForm bằng cách sử dụng móc React và TypeScript:typescriptimport { useState } from’react’;interface loginFormProps {}const loginForm=({}: loginFormProps)=> {const [formStatus, setFormStatus]=useState(’’);//khởi tạo formStatus dưới dạng một chuỗi trống stringconst handSubmit=(event: React.FormEvent )=> {event.preventDefault();if (!validateCredentials(usernameField.value, passField.value)) {alert(“Tên người dùng hoặc mật khẩu không hợp lệ.” );return;}setFormStatus(‘đã gửi’);//đặt biểu mẫu
const [formStatus, setFormStatus] = useState({ success: false, error: '' });
Tiếp theo, chúng ta sẽ phát triển một thực thể chức năng chịu trách nhiệm xác thực thông tin xác thực của người dùng. Thành phần này sẽ mô phỏng giao dịch HTTP thường được chứng kiến trong quá trình giao tiếp giữa các ứng dụng giao diện người dùng và dịch vụ xác thực phụ trợ.
const onSubmit = (data) => {
if (data.username === 'testuser' && data.password === 'password123') {
setFormStatus({ success: true, error: '' });
} else {
setFormStatus({ success: false, error: 'Invalid username or password' });
}
};
Kết hợp một phiên bản của hàm được kích hoạt khi tương tác với phần tử được chỉ định, bằng cách chuyển chỉ định của nó dưới dạng tham số cho thành phần đã nói, để gợi ra phản hồi mong muốn liên quan đến hành động được chỉ định khi được tương tác.
onClick={handleSubmit(onSubmit)}
Tầm quan trọng của biến trạng thái formStatus nằm ở khả năng quyết định cách thức truyền tải phản hồi đến người dùng cuối. Trong trường hợp người dùng cung cấp thông tin xác thực hợp lệ, người dùng có thể chọn hiển thị thông báo biểu thị thành công. Hơn nữa, nếu ứng dụng chứa các trang bổ sung trong khung Next.js, việc chuyển hướng đến một trang thay thế sẽ trở thành một lựa chọn khả thi cho người dùng.
Điều quan trọng là đưa ra phản hồi mang tính xây dựng khi thông tin xác thực không chính xác. May mắn thay, Material-UI cung cấp một thành phần phản hồi tuyệt vời có thể được sử dụng cùng với khả năng hiển thị có điều kiện của React để truyền đạt trạng thái của quá trình gửi biểu mẫu tới người dùng, tùy thuộc vào giá trị của biến formStatus.
Để triển khai chức năng này, hãy chèn đoạn mã nói trên ngay bên dưới thẻ mở .
{formStatus.success ? (
<Alert severity="success">Form submitted successfully</Alert>
) : formStatus.error ? (
<Alert severity="error">{formStatus.error}</Alert>
) : null}
Để thu thập và xác minh thông tin đầu vào của người dùng, người ta có thể sử dụng phương thức register để đăng ký các thành phần đầu vào của biểu mẫu, theo dõi giá trị của chúng và xác định tiêu chí xác thực.
Hàm đã cho chấp nhận nhiều đầu vào, bao gồm mã định danh của trường đầu vào cùng với phiên bản tham số xác thực. Cái sau mô tả các tiêu chí để xác thực trường đầu vào, bao gồm các mẫu cụ thể và độ dài tối thiểu.
Chắc chắn, đây là ví dụ về cách kết hợp thành phần “StyledTextField” đồng thời bao gồm đoạn mã được cung cấp:javascriptimport React from’react’;import { TextField } from’@material-ui/core’;const MyUsername=()=> ( Nhập tên người dùng của bạn bên dưới Hãy tiếp tục và bao gồm đoạn mã sau làm chỗ dựa trong trường tên người dùng. );xuất MyUsername mặc định;
{...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'
},
})}
Chắc chắn! Đây là một ví dụ về cách bạn có thể sửa đổi mã để sử dụng một prop mới được gọi là extraObject:jsximport React from’react’;//other import…constPasswordStyledTextField=({ AddedObject })=> {//đã thêm propconst handTextChange=(văn bản)=> {//giống//…};return (