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ù nó được thiết kế cho React nhưng bạn có thể mở rộng khả năng của nó sang các framework khác trong hệ sinh thái của React, như Next.js.
Mục lục
Bắt đầu với React Hook Form và Material UI
Mẫu móc phản ứng 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 Giao diện người dùng vật liệu Các thành phần và kiểu giao diện người dùng, 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, hãy tạo một dự án Next.js cục bộ. Với mục đích của hướng dẫn này, hãy cài đặt phiên bản Next.js mới nhất sử dụng thư mục Ứng dụng.
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 là bản xem trước những gì bạn sẽ xây dựng:
Bạn có thể tìm thấy mã của dự án này trong này GitHub kho.
Tạo và tạo kiểu cho biểu mẫu
React Hook Form cung cấp nhiều chức năng tiện ích, bao gồm cả useForm hook.
Móc này hợp lý hóa quy trình xử lý trạng thái biểu mẫu, xác thực đầu vào và gửi, đơn giản hóa các khía cạnh cơ bản của quản lý biểu mẫu.
Để tạo một biểu mẫu sử dụng hook này, hãy thêm đoạn mã sau vào một tệp mới, src/comComponents/form.js.
Đầu tiên, thêm các mục nhập cần thiết cho các gói React Hook Form và 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 cung cấp một bộ sưu tập các thành phần UI sẵn sàng sử dụng mà bạn có thể tùy chỉnh thêm bằng cách chuyển các đạo cụ tạo kiểu.
Tuy nhiên, nếu bạn muốn linh hoạt hơn và kiểm soát thiết kế giao diện người dùng, bạn có thể chọn sử dụng phương pháp được tạo kiểu để tạo kiểu cho các thành phần giao diện người dùng của mình bằng các thuộc tính CSS. Trong trường hợp này, bạn có thể tạo kiểu cho các thành phần chính của biểu mẫu: vùng chứa chính, chính biểu mẫu và các trường văn bản đầu vào.
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%',
});
Duy trì một cơ sở mã mô-đun là điều quan trọng trong quá trình phát triển. Vì lý do này, thay vì gộp tất cả mã vào một tệp duy nhất, bạn nên xác định và định kiểu các thành phần tùy chỉnh trong các tệp riêng biệt.
Bằng cách này, bạn có thể dễ dàng nhập và sử dụng các thành phần này trên các phần khác nhau của ứng dụng, giúp mã của bạn có tổ chức và dễ bảo trì hơn.
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>
</>
);
}
Cuối cùng, nhập thành phần này vào tệp app/page.js của bạn. Xóa tất cả mã Next.js soạn sẵn và cập nhật nó với nội dung sau:
import Form from 'src/components/Form'export default function Home() {
return (
<main >
<Form />
</main>
)
}
Khởi động máy chủ phát triển và bạn sẽ thấy một biểu mẫu cơ bản có hai trường nhập và nút gửi trong trình duyệt của mình.
Xử lý xác thực biểu mẫu
Hình thức trông rất tuyệt, nhưng nó chưa làm được gì cả. Để làm cho nó hoạt động, bạn cần thêm một số mã xác thực. Các hàm tiện ích hook useForm sẽ có ích khi quản lý và xác thực dữ liệu đầu vào của người dùng.
Đầu tiên, xác định biến trạng thái sau để quản lý trạng thái biểu mẫu hiện tại, tùy thuộc vào việc người dùng đã cung cấp thông tin xác thực chính xác hay chưa. Thêm mã này bên trong thành phần chức năng:
const [formStatus, setFormStatus] = useState({ success: false, error: '' });
Tiếp theo, tạo một hàm xử lý để xác thực thông tin đăng nhập. Hàm này sẽ mô phỏng yêu cầu API HTTP thường xảy ra khi ứng dụng khách tương tác với API 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' });
}
};
Thêm hàm xử lý sự kiện onClick vào thành phần nút—chuyển nó dưới dạng chỗ dựa—để kích hoạt hàm onSubmit khi người dùng nhấp vào nút gửi.
onClick={handleSubmit(onSubmit)}
Giá trị của biến trạng thái formStatus rất quan trọng vì nó sẽ xác định cách bạn cung cấp phản hồi cho người dùng. Nếu người dùng nhập thông tin xác thực chính xác, bạn có thể hiển thị thông báo thành công. Nếu bạn có các trang khác trong ứng dụng Next.js của mình, bạn có thể chuyển hướng chúng đến một trang khác.
Bạn cũng nên cung cấp phản hồi thích hợp nếu thông tin xác thực sai. Material UI cung cấp một thành phần phản hồi tuyệt vời mà bạn có thể sử dụng cùng với kỹ thuật kết xuất có điều kiện của React để thông báo cho người dùng, dựa trên giá trị của formStatus.
Để thực hiện việc này, hãy thêm mã sau ngay bên dưới thẻ mở StyledForm.
{formStatus.success ? (
<Alert severity="success">Form submitted successfully</Alert>
) : formStatus.error ? (
<Alert severity="error">{formStatus.error}</Alert>
) : null}
Bây giờ, để nắm bắt và xác thực thông tin đầu vào của người dùng, bạn có thể sử dụng chức năng đăng ký để đăng ký các trường đầu vào của biểu mẫu, theo dõi các giá trị của nó và chỉ định các quy tắc xác thực.
Hàm này nhận một số đối số, bao gồm tên của trường đầu vào và đối tượng tham số xác thực. Đối tượng này chỉ định các quy tắc xác thực cho trường đầu vào, chẳng hạn như mẫu cụ thể và độ dài tối thiểu.
Hãy tiếp tục và thêm đoạn mã sau làm chỗ dựa trong thành phần tên người dùng 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'
},
})}
Bây giờ, hãy thêm đối tượng sau làm chỗ dựa trong thành phần StyledTextField mật khẩu.
{...register('password', {
required: 'Password required',
minLength: {
value: 8,
message: 'Password must be at least 8 characters'
},
})}
Thêm mã sau bên dưới trường nhập tên người dùng để cung cấp phản hồi trực quan về yêu cầu đầu vào.
Mã này sẽ kích hoạt cảnh báo kèm theo thông báo lỗi để thông báo cho người dùng về các yêu cầu, nhằm đảm bảo họ sửa mọi lỗi trước khi gửi biểu mẫu.
{errors.username && <Alert severity="error">{errors.username.message}</Alert>}
Cuối cùng, bao gồm mã tương tự ngay bên dưới trường văn bản nhập mật khẩu:
{errors.password && <Alert severity="error">{errors.password.message}</Alert>}
Tuyệt vời! Với những thay đổi này, bạn sẽ có một biểu mẫu chức năng, hấp dẫn về mặt hình ảnh được tạo bằng React Hook Form và Material UI.
Nâng cao sự phát triển Next.js của bạn với các thư viện phía máy khách
Material UI và React Hook Form chỉ là hai ví dụ trong số nhiều thư viện tuyệt vời phía máy khách mà bạn có thể sử dụng để tăng tốc độ phát triển giao diện người dùng Next.js.
Thư viện phía máy khách cung cấp nhiều tính năng sẵn sàng cho sản xuất và các thành phần dựng sẵn có thể giúp bạn xây dựng các ứng dụng giao diện người dùng tốt hơn một cách nhanh chóng và hiệu quả hơn.
