ReactJS - Komponen Borang

Hai there, para pembangun yang sedang belajar! Hari ini, kita akan melihat dunia yang menarik komponen borang React. Seperti guru sains komputer tetangga Anda, saya di sini untuk menghidangkan Anda dalam perjalanan ini langkah demi langkah. Jadi, ambil minuman kesukaan Anda, betulkan kedudukan, dan mari kita embarkasi dalam petualangan coding ini bersama!

Apa Itu Komponen Borang?

Sebelum kita masuk ke hal-hal kecil komponen borang React, mari kitaambil sedikit waktu untuk memahami apa itu dan mengapa itu sangat penting.

Definisi

Sebuah komponen borang dalam React adalah komponen khusus yang dirancang untuk mengendalikan input pengguna dan pengajuan data. Itu seperti versi digital dari borang kertas yang Anda isi di klinik dokter, tapi jauh lebih menarik dan interaktif!

Pentingnya

Komponen borang sangat penting dalam pengembangan web karena mereka berfungsi sebagai sarana utama untuk mengumpulkan informasi dari pengguna. Apakah itu borang login sederhana atau survei yang kompleks, komponen borang memungkinkan pengguna untuk berinteraksi dengan aplikasi Anda dan menyediakan data berharga.

Menggunakan Komponen Borang

Sekarang kita mengetahui apa itu komponen borang, mari kita buat tangan dan belajar bagaimana menciptakan dan menggunakan mereka dalam React.

Struktur Borang Dasar

Mari kita mulai dengan contoh sederhana komponen borang:

import React, { useState } from 'react';

function SimpleForm() {
const [name, setName] = useState('');

const handleSubmit = (event) => {
event.preventDefault();
alert(`Hello, ${name}!`);
};

return (
<form onSubmit={handleSubmit}>
<label>
Name:
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</label>
<button type="submit">Submit</button>
</form>
);
}

mari kitauraikan ini:

1. Kita import useState dari React untuk mengelola state borang kita.
2. Kita buat komponen fungsional yang dinamai SimpleForm.
3. Dalam komponen, kita gunakan useState untuk membuat variabel state name dan fungsi pengatur setName.
4. Kita tentukan fungsi handleSubmit yang menghalangi perilaku pengajuan borang default dan menampilkan peringatan dengan nama yang dimasukkan.
5. Dalam pernyataan return, kita render borang dengan field input untuk nama dan tombol submit.
6. Field input nilai dikendalikan oleh state name, dan peristiwa onChange mengupdate state saat pengguna mengetik.

Mengendalikan Banyak Input

Sekarang, mari kita tingkatkan dan buat borang dengan banyak input:

import React, { useState } from 'react';

function MultiInputForm() {
const [formData, setFormData] = useState({
firstName: '',
lastName: '',
email: ''
});

const handleChange = (event) => {
const { name, value } = event.target;
setFormData(prevData => ({
...prevData,
[name]: value
}));
};

const handleSubmit = (event) => {
event.preventDefault();
console.log('Form submitted:', formData);
};

return (
<form onSubmit={handleSubmit}>
<label>
First Name:
<input
type="text"
name="firstName"
value={formData.firstName}
onChange={handleChange}
/>
</label>
<label>
Last Name:
<input
type="text"
name="lastName"
value={formData.lastName}
onChange={handleChange}
/>
</label>
<label>
Email:
<input
type="email"
name="email"
value={formData.email}
onChange={handleChange}
/>
</label>
<button type="submit">Submit</button>
</form>
);
}

Dalam contoh ini:

1. Kita gunakan satu objek state formData untuk menyimpan semua field borang.
2. Fungsi handleChange menggunakan atribut name input untuk mengupdate field yang benar dalam state.
3. Kita gunakan operator penyebaran (...prevData) untuk menyalin state sebelumnya sebelum mengupdate nya.

Validasi Borang

Tidak ada borang yang lengkap tanpa validasi! Mari kita tambahkan validasi dasar ke borang kita:

import React, { useState } from 'react';

function ValidatedForm() {
const [formData, setFormData] = useState({
username: '',
password: ''
});
const [errors, setErrors] = useState({});

const handleChange = (event) => {
const { name, value } = event.target;
setFormData(prevData => ({
...prevData,
[name]: value
}));
};

const validate = () => {
let tempErrors = {};
if (!formData.username) tempErrors.username = "Username diperlukan";
if (formData.password.length < 6) tempErrors.password = "Kata sandi harus minimal 6 karakter";
setErrors(tempErrors);
return Object.keys(tempErrors).length === 0;
};

const handleSubmit = (event) => {
event.preventDefault();
if (validate()) {
console.log('Form submitted:', formData);
} else {
console.log('Form memiliki kesalahan');
}
};

return (
<form onSubmit={handleSubmit}>
<label>
Username:
<input
type="text"
name="username"
value={formData.username}
onChange={handleChange}
/>
{errors.username && <span style={{color: 'red'}}>{errors.username}</span>}
</label>
<label>
Password:
<input
type="password"
name="password"
value={formData.password}
onChange={handleChange}
/>
{errors.password && <span style={{color: 'red'}}>{errors.password}</span>}
</label>
<button type="submit">Submit</button>
</form>
);
}

Dalam contoh ini:

1. Kita tambahkan state baru errors untuk menyimpan kesalahan validasi.
2. Kita buat fungsi validate yang memeriksa username kosong dan kata sandi pendek.
3. Dalam handleSubmit, kita hanya maju jika borang lolos validasi.
4. Kita tampilkan pesan kesalahan di bawah setiap field input saat validasi gagal.

Kesimpulan

Dan begitu juga, teman-teman! Kita telah menjelajahi negeri komponen borang React, dari input sederhana ke borang multi-field dengan validasi. Ingat, latihan membuat sempurna, jadi jangan takut untuk ber eksperimen dengan konsep ini dan buat borang Anda sendiri.

Saat kita menutup, ini adalah tabel ringkasan metode utama yang kita gunakan dalam komponen borang kita:

Metode	Tujuan
useState	Kelola state borang
onChange	Kendalikan perubahan input
onSubmit	Kendalikan pengajuan borang
preventDefault	Halangi perilaku borang default

Terus coding, tetap ciek, dan ingat: di dunia pemrograman, setiap kesalahan adalah kesempatan belajar yang bersembunyi. Selamat React-ing!

Credits: Image by storyset