ReactJS - Formik: Membina Borang Pengeluaran

Hai there, bakal pengembang React! Hari ini, kita akan memulai perjalanan menarik ke dunia penanganan borang dalam React menggunakan pustaka yang fantastik bernama Formik. Pada akhir panduan ini, Anda akan dapat membuat borang yang ramping dan efisien seperti seorang ahli. Jadi, mari kita masuk ke dalam!

Apa Itu Formik?

Sebelum kita mulai mengoding, mari kita pahami apa itu Formik dan mengapa ini seperti perubahan besar dalam pengembangan React.

Formik adalah pustaka yang populer yang menyederhanakan penanganan borang dalam aplikasi React. Itu mengurus bagian membosankan borang seperti mengelola state borang, validasi, dan pengiriman, membiarkan Anda fokus pada apa yang paling penting - logika aplikasi Anda.

Pertimbangkan Formik seperti asisten pribadi Anda. Seperti bagaimana asisten yang bagus akan mengurus semua pekerjaan kertas untuk Anda, Formik mengelola semua tugas yang berhubungan dengan borang, meninggalkan Anda bebas untuk fokus pada gambaran besar.

Menyiapkan Proyek Kita

Pertama-tama, mari kita siapkan proyek kita. Kita akan asumsikan Anda sudah memiliki Node.js terinstal di komputer Anda. Jika belum, silakan instalnya dari situs web resmi Node.js.

Buka terminal Anda dan jalankan perintah berikut:

npx create-react-app expense-form-app
cd expense-form-app
npm install formik yup
npm start

Perintah ini membuat aplikasi React baru, menginstal Formik dan Yup (pustaka untuk validasi borang), dan memulai server pengembangan.

Membuat Borang Pengeluaran Kita

Sekarang kita memiliki proyek kita disiapkan, mari kita buat borang pengeluaran kita. Kita akan membuat borang sederhana yang memungkinkan pengguna memasukkan deskripsi dan jumlah pengeluaran.

Langkah 1: Struktur Borang Dasar

Mari kita mulai dengan membuat struktur borang dasar. Buka file src/App.js dan ganti isinya dengan kode berikut:

import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';

function App() {
return (
<div className="App">
<h1>Borang Pengeluaran</h1>
<Formik
initialValues={{ description: '', amount: '' }}
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
setSubmitting(false);
}, 400);
}}
>
{({ isSubmitting }) => (
<Form>
<div>
<label htmlFor="description">Deskripsi</label>
<Field type="text" name="description" />
<ErrorMessage name="description" component="div" />
</div>
<div>
<label htmlFor="amount">Jumlah</label>
<Field type="number" name="amount" />
<ErrorMessage name="amount" component="div" />
</div>
<button type="submit" disabled={isSubmitting}>
Kirim
</button>
</Form>
)}
</Formik>
</div>
);
}

export default App;

Mari kitauraikan apa yang terjadi di sini:

1. Kita import komponen yang diperlukan dari Formik.
2. Kita membuat komponen Formik yang mengelilingi borang kita.
3. Kita menetapkan initialValues untuk field borang kita.
4. Kita tentukan fungsi onSubmit yang akan menghandle pengiriman borang.
5. Kita menggunakan komponen Form, Field, dan ErrorMessage dari Formik untuk membuat struktur borang kita.

Langkah 2: Menambahkan Validasi

Sekarang, mari kita tambahkan validasi ke borang kita. Kita akan menggunakan Yup untuk ini. Update file App.js Anda seperti berikut:

import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';

const ExpenseSchema = Yup.object().shape({
description: Yup.string()
.min(2, 'Terlalu Pendek!')
.max(50, 'Terlalu Panjang!')
.required('Diperlukan'),
amount: Yup.number()
.positive('Harus positif')
.required('Diperlukan'),
});

function App() {
return (
<div className="App">
<h1>Borang Pengeluaran</h1>
<Formik
initialValues={{ description: '', amount: '' }}
validationSchema={ExpenseSchema}
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
setSubmitting(false);
}, 400);
}}
>
{({ isSubmitting }) => (
<Form>
<div>
<label htmlFor="description">Deskripsi</label>
<Field type="text" name="description" />
<ErrorMessage name="description" component="div" />
</div>
<div>
<label htmlFor="amount">Jumlah</label>
<Field type="number" name="amount" />
<ErrorMessage name="amount" component="div" />
</div>
<button type="submit" disabled={isSubmitting}>
Kirim
</button>
</Form>
)}
</Formik>
</div>
);
}

export default App;

Ini adalah apa yang kita tambahkan:

1. Kita import Yup dan tentukan skema validasi (ExpenseSchema).
2. Kita tambahkan prop validationSchema ke komponen Formik.

Sekarang borang kita akan memvalidasi input sebelum pengiriman!

Langkah 3: Menyempurnakan Borang

Mari kita tambahkan sedikit styling untuk membuat borang kita terlihat lebih indah. Buat file baru bernama App.css di folder src Anda dan tambahkan CSS berikut:

.App {
font-family: Arial, sans-serif;
max-width: 400px;
margin: 0 auto;
padding: 20px;
}

h1 {
color: #333;
}

form {
display: flex;
flex-direction: column;
}

div {
margin-bottom: 15px;
}

label {
margin-bottom: 5px;
display: block;
}

input {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
}

button {
background-color: #4CAF50;
color: white;
padding: 10px;
border: none;
border-radius: 4px;
cursor: pointer;
}

button:disabled {
background-color: #ddd;
}

.error {
color: red;
font-size: 0.8em;
}

Sekarang, perbarui App.js Anda untuk mengimport file CSS ini:

import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';
import './App.css';

// ... sisanya kode tetap sama

Kesimpulan

Selamat! Anda telah berhasil membuat borang pengeluaran yang berfungsi menggunakan Formik dan React. Ini hanya awal dari apa yang Anda dapat lakukan dengan Formik. Sebagai Anda terus melanjutkan perjalanan React Anda, Anda akan menemukan Formik sebagai alat yang tak tergantikan untuk menghandle borang semua tingkat kekompleksan.

Ingat, latihan membuat sempurna. Cobalah memodifikasi borang ini, tambahkan field baru, atau buat borang baru menggunakan apa yang Anda pelajari. Dunia pengembangan React luas dan menarik, dan Anda sedang dalam jalannya untuk menjadi bagian dari itu!

Semangat coding, dan semoga borang Anda selalu tervalidasi mulus! ?

Tabel Metode Formik

Berikut adalah tabel dari beberapa metode Formik yang sering digunakan:

Metode	Deskripsi
handleSubmit	Menghandle pengiriman borang
handleChange	Menghandle perubahan field borang
handleBlur	Menghandle saat field kehilangan fokus
setFieldValue	Secara manual menetapkan nilai field
setFieldTouched	Secara manual menetapkan state sentuh field
validateForm	Secara manual memicu validasi borang
resetForm	Reset borang ke nilai awal
setErrors	Secara manual menetapkan kesalahan borang
setStatus	Menetapkan objek status tingkat atas
setSubmitting	Menetapkan state pengiriman borang

Metode ini memberikan Anda kontrol halus atas perilaku dan state borang Anda. Sebagai Anda menjadi lebih nyaman dengan Formik, Anda akan menemukan diri Anda mencari metode ini untuk membuat borang yang lebih kompleks dan interaktif.

Credits: Image by storyset