ReactJS - Pengaturan Borang

Hai, para pemrogram yang sedang mencari ilmu! Hari ini, kita akan melihat dunia yang menarik pengaturan borang dalam ReactJS. Sebagai guru sains komputer tetangga yang ramah, saya disini untuk mengorbit anda dalam perjalanan ini langkah demi langkah. Jadi, ambil secangkir kopi (atau minuman kesukaan anda), dan mari kita mulai!

Apa Itu Borang dalam ReactJS?

Sebelum kita melompat ke kode, mari kita memahami apa itu borang dan mengapa mereka penting. Borang adalah seperti penjaga pintu masukan pengguna dalam aplikasi web. Mereka membolehkan pengguna berinteraksi dengan aplikasi kita, menyediakan maklumat yang kita boleh proses dan gunakan. Dalam React, borang adalah agak khas kerana mereka menjaga status sendiri. Ini bermakna kita perlu mengendalikan mereka sedikit berbeza daripada elemen lain.

Dasar Pengendalian Borang

Mari kita mulai dengan contoh borang yang ringan:

import React, { useState } from 'react';

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

const handleSubmit = (event) => {
event.preventDefault();
alert('Sebuah nama telah diserahkan: ' + name);
}

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

mari kitauraikan ini:

1. Kita import useState dari React untuk menguruskan status borang kita.
2. Kita cipta variable status name dan fungsi setName untuk mengemaskininya.
3. Fungsi handleSubmit menghalang penghantaran borang default dan menunjukkan alert dengan nama yang diserahkan.
4. Dalam borang, kita tetapkan value input kepada status name kita dan gunakan onChange untuk mengemaskini status apabila input berubah.

Ini adalah asas pengendalian borang dalam React. Kita mengawal status borang dengan React, ini adalah sebab kita memanggil ini "komponen dikawal".

Pengendalian Input Berbilang

Sekarang, apa jika kita ada input berbilang? Kita perlu cipta status terpisah untuk setiap satu? Tidak sepenuhnya! Mari kita lihat borang yang lebih kompleks:

import React, { useState } from 'react';

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

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

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

return (
<form onSubmit={handleSubmit}>
<input
type="text"
name="firstName"
value={formData.firstName}
onChange={handleChange}
placeholder="Nama Pertama"
/>
<input
type="text"
name="lastName"
value={formData.lastName}
onChange={handleChange}
placeholder="Nama Akhir"
/>
<input
type="email"
name="email"
value={formData.email}
onChange={handleChange}
placeholder="Email"
/>
<button type="submit">Serahkan</button>
</form>
);
}

Dalam contoh ini, kita menggunakan satu objek status untuk menguruskan semua medan borang kita. Fungsi handleChange menggunakan attribute name input untuk mengemaskini medan yang betul dalam status kita. Pendekatan ini berskala baik kerana borang anda semakin besar.

Pengendalian Jenis Input Berbeza

Borang bukan hanya tentang input teks. Mari kita lihat bagaimana kita boleh mengendalikan jenis input berbeza:

import React, { useState } from 'react';

function DiverseForm() {
const [formData, setFormData] = useState({
name: '',
age: '',
gender: '',
isStudent: false,
favoriteColor: 'blue'
});

const handleChange = (event) => {
const { name, value, type, checked } = event.target;
setFormData(prevState => ({
...prevState,
[name]: type === 'checkbox' ? checked : value
}));
}

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

return (
<form onSubmit={handleSubmit}>
<input
type="text"
name="name"
value={formData.name}
onChange={handleChange}
placeholder="Nama"
/>
<input
type="number"
name="age"
value={formData.age}
onChange={handleChange}
placeholder="Umur"
/>
<select name="gender" value={formData.gender} onChange={handleChange}>
<option value="">Pilih Gender</option>
<option value="male">Lelaki</option>
<option value="female">Perempuan</option>
<option value="other">Lain-lain</option>
</select>
<label>
<input
type="checkbox"
name="isStudent"
checked={formData.isStudent}
onChange={handleChange}
/>
Adakah anda pelajar?
</label>
<fieldset>
<legend>Warna Kesukaan</legend>
<label>
<input
type="radio"
name="favoriteColor"
value="red"
checked={formData.favoriteColor === 'red'}
onChange={handleChange}
/>
Merah
</label>
<label>
<input
type="radio"
name="favoriteColor"
value="blue"
checked={formData.favoriteColor === 'blue'}
onChange={handleChange}
/>
Biru
</label>
<label>
<input
type="radio"
name="favoriteColor"
value="green"
checked={formData.favoriteColor === 'green'}
onChange={handleChange}
/>
Hijau
</label>
</fieldset>
<button type="submit">Serahkan</button>
</form>
);
}

Borang ini menunjukkan bagaimana mengendalikan jenis input berbeza: teks, nombor, pilihan, kotak centang, dan butang radio. Kunci adalah dalam fungsi handleChange, yang memeriksa jenis input dan mengemaskini status secukupnya.

Pemeriksaan Borang

Tiada borang yang lengkap tanpa pemeriksaan. Mari kita tambah pemeriksaan asas ke borang kita:

import React, { useState } from 'react';

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

const [errors, setErrors] = useState({});

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

const validateForm = () => {
let newErrors = {};
if (!formData.username) newErrors.username = 'Username diperlukan';
if (!formData.email) {
newErrors.email = 'Email diperlukan';
} else if (!/\S+@\S+\.\S+/.test(formData.email)) {
newErrors.email = 'Email adalah invalid';
}
if (!formData.password) {
newErrors.password = 'Kata laluan diperlukan';
} else if (formData.password.length < 6) {
newErrors.password = 'Kata laluan mesti sekurang-kurangnya 6 aksara';
}
return newErrors;
}

const handleSubmit = (event) => {
event.preventDefault();
const newErrors = validateForm();
if (Object.keys(newErrors).length > 0) {
setErrors(newErrors);
} else {
console.log('Borang diserahkan:', formData);
// Di sini anda biasanya akan menghantar data ke pelayan
}
}

return (
<form onSubmit={handleSubmit}>
<div>
<input
type="text"
name="username"
value={formData.username}
onChange={handleChange}
placeholder="Username"
/>
{errors.username && <span className="error">{errors.username}</span>}
</div>
<div>
<input
type="email"
name="email"
value={formData.email}
onChange={handleChange}
placeholder="Email"
/>
{errors.email && <span className="error">{errors.email}</span>}
</div>
<div>
<input
type="password"
name="password"
value={formData.password}
onChange={handleChange}
placeholder="Kata Laluan"
/>
{errors.password && <span className="error">{errors.password}</span>}
</div>
<button type="submit">Serahkan</button>
</form>
);
}

Dalam contoh ini, kita menambah fungsi validateForm yang memeriksa medan kosong dan memeriksa format email serta panjang kata laluan. Kita menyimpan apa-apa kesilapan dalam objek status yang terpisah dan menunjukkan mereka di bawah medan yang berkaitan.

Kesimpulan

Dan begitu juga! Kita telah meliputi asas pengaturan borang dalam React, daripada input teks ringan ke borang yang lebih kompleks dengan jenis input berbeza dan pemeriksaan. Ingat, latihan membawa ke kesempurnaan. Cuba membina borang anda sendiri, cuba jenis input berbeza, dan jangan takut untuk membuat kesilapan - ini adalah bagaimana kita belajar!

Berikut adalah jadual rujukan ringkas bagi kaedah yang kita gunakan:

Kaedah	Tujuan
useState	Untuk mencipta dan menguruskan status dalam komponen fungsi
onChange	Untuk mengendalikan perubahan dalam input borang
onSubmit	Untuk mengendalikan penghantaran borang
preventDefault	Untuk menghalang tingkah laku penghantaran borang default

Bersih-bersih coding, dan mungkin borang anda sentiasa mudah digunakan dan bebas daripada bug!

Credits: Image by storyset