Rapikan formulir Anda dengan kombinasi pustaka fungsional dan desain ini.

Material UI (MUI) adalah pustaka komponen populer yang mengimplementasikan sistem Desain Material Google. Ini menyediakan berbagai komponen UI siap pakai yang dapat Anda gunakan untuk membuat antarmuka yang fungsional dan menarik secara visual.

Meskipun dirancang untuk React, Anda dapat memperluas kemampuannya ke kerangka kerja lain dalam ekosistem React, seperti Next.js.

Memulai Dengan Formulir React Hook dan UI Material

Bentuk Kait Reaksi adalah perpustakaan populer yang menyediakan cara sederhana dan deklaratif untuk membuat, mengelola, dan memvalidasi formulir.

Dengan mengintegrasikan UI Materi Komponen dan gaya UI, Anda dapat membuat formulir menarik yang mudah digunakan, dan menerapkan desain yang konsisten ke aplikasi Next.js Anda.

Untuk memulai, rancang proyek Next.js secara lokal. Untuk tujuan panduan ini, instal versi terbaru Next.js yang menggunakan direktori Aplikasi.

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

Selanjutnya, instal paket-paket ini di proyek Anda:

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

Berikut pratinjau dari apa yang akan Anda buat:

Anda dapat menemukan kode proyek ini di sini GitHub gudang.

Membuat dan Menata Bentuk

React Hook Form menyediakan berbagai fungsi utilitas, termasuk gunakanFormulir kait.

Kait ini menyederhanakan proses penanganan status formulir, validasi masukan, dan penyerahan, menyederhanakan aspek mendasar manajemen formulir.

Untuk membuat formulir yang menggunakan hook ini, tambahkan kode berikut ke file baru, src/komponen/form.js.

Pertama, tambahkan impor yang diperlukan untuk paket React Hook Form dan 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 menyediakan kumpulan komponen UI siap pakai yang dapat Anda sesuaikan lebih lanjut dengan meneruskan alat peraga gaya.

Meskipun demikian, jika Anda menginginkan lebih banyak fleksibilitas dan kontrol atas desain UI, Anda dapat memilih untuk menggunakan metode gaya untuk menata elemen UI Anda dengan properti CSS. Dalam hal ini, Anda bisa menata gaya komponen utama formulir: wadah utama, formulir itu sendiri, dan bidang teks input.

Tepat di bawah import, tambahkan kode ini:

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

Mempertahankan basis kode modular penting dalam pengembangan. Oleh karena itu, daripada menggabungkan semua kode ke dalam satu file, Anda harus mendefinisikan dan menata komponen khusus dalam file terpisah.

Dengan cara ini, Anda dapat dengan mudah mengimpor dan menggunakan komponen-komponen ini di berbagai bagian aplikasi Anda, sehingga membuat kode Anda lebih terorganisir dan mudah dipelihara.

Sekarang, tentukan komponen fungsional:

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

Terakhir, impor komponen ini ke file Anda aplikasi/halaman.js mengajukan. Hapus semua kode boilerplate Next.js dan perbarui dengan yang berikut:

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



 </main>
 )
}

Mulai server pengembangan, dan Anda akan melihat formulir dasar dengan dua kolom input dan tombol kirim di browser Anda.

Menangani Validasi Formulir

Bentuknya terlihat bagus, namun belum melakukan apa pun. Untuk membuatnya berfungsi, Anda perlu menambahkan beberapa kode validasi. gunakanFormulir fungsi utilitas kait akan berguna saat mengelola dan memvalidasi input pengguna.

Pertama, tentukan variabel status berikut untuk mengelola status formulir saat ini, bergantung pada apakah pengguna telah memberikan kredensial yang benar. Tambahkan kode ini di dalam komponen fungsional:

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

Selanjutnya, buat fungsi handler untuk memvalidasi kredensial. Fungsi ini akan menyimulasikan permintaan API HTTP yang biasanya terjadi saat aplikasi klien berinteraksi dengan API autentikasi backend.

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

Tambahkan fungsi pengendali kejadian onClick ke komponen tombol—meneruskannya sebagai prop—untuk memicu fungsi onSubmit ketika pengguna mengklik tombol kirim.

onClick={handleSubmit(onSubmit)}

Nilai dari status bentuk Variabel status penting karena akan menentukan cara Anda memberikan umpan balik kepada pengguna. Jika pengguna memasukkan kredensial yang benar, Anda mungkin menampilkan pesan sukses. Jika Anda memiliki halaman lain di aplikasi Next.js, Anda dapat mengalihkannya ke halaman lain.

Anda juga harus memberikan umpan balik yang sesuai jika kredensialnya salah. Material UI menawarkan komponen umpan balik hebat yang dapat Anda gunakan bersama Teknik rendering bersyarat React untuk memberi tahu pengguna, berdasarkan nilai formStatus.

Untuk melakukan ini, tambahkan kode berikut tepat di bawah Bentuk Bergaya tag pembuka.

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

Sekarang, untuk menangkap dan memvalidasi masukan pengguna, Anda dapat menggunakan daftar berfungsi untuk mendaftarkan kolom masukan formulir, melacak nilainya, dan menentukan aturan validasi.

Fungsi ini membutuhkan beberapa argumen, termasuk nama kolom input dan objek parameter validasi. Objek ini menentukan aturan validasi untuk kolom input seperti pola spesifik, dan panjang minimum.

Silakan sertakan kode berikut sebagai penyangga di nama pengguna BidangTeks Bergaya komponen.

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

Sekarang, tambahkan objek berikut sebagai penyangga di kata sandiBidangTeks Bergaya komponen.

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

Tambahkan kode berikut di bawah kolom input nama pengguna untuk memberikan umpan balik visual tentang persyaratan input.

Kode ini akan memicu peringatan dengan pesan kesalahan untuk memberi tahu pengguna tentang persyaratan, untuk memastikan mereka memperbaiki kesalahan apa pun sebelum mengirimkan formulir.

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

Terakhir, sertakan kode serupa tepat di bawah kolom teks masukan kata sandi:

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

Luar biasa! Dengan perubahan ini, Anda akan memiliki formulir fungsional dan menarik secara visual yang dibuat dengan React Hook Form dan Material UI.

Tingkatkan Pengembangan Next.js Anda Dengan Pustaka Sisi Klien

Material UI dan React Hook Form hanyalah dua contoh dari banyak perpustakaan sisi klien hebat yang dapat Anda gunakan untuk mempercepat pengembangan frontend Next.js.

Pustaka sisi klien menyediakan berbagai fitur siap produksi dan komponen siap pakai yang dapat membantu Anda membangun aplikasi front-end yang lebih baik dengan lebih cepat dan efisien.