ReactJS - Komponen Terkontrol: Panduan untuk Pemula

Hai sana, calon pengembang React! Hari ini, kita akan melangkah ke dalam dunia Komponen Terkontrol di ReactJS. Jangan khawatir jika Anda baru saja memulai programming - saya akan menjadi panduan ramah Anda, dan kita akan mengambil langkah ini secara bertahap. Pada akhir tutorial ini, Anda akan menciptakan formulir seperti seorang profesional!

Apa Itu Komponen Terkontrol?

Sebelum kita masuk ke dalamnya, mari kita mulai dengan sebuah analogi sederhana. Bayangkan Anda di sebuah restoran mewah, dan Anda ingin memesan sebuah pizza khusus. Dalam skenario ini, Anda (komponen React) adalah yang mengontrol apa yang ada di pizza (data formulir). Setiap kali Anda ingin menambahkan atau menghapus topping, Anda memberitahu pelayan (state), dan mereka memperbarui pesanan Anda sesuai nya. Ini adalah esensi bagaimana komponen terkontrol bekerja di React!

Dalam istilah React, komponen terkontrol adalah elemen input formulir yang nilainya dikendalikan oleh React. Daripada DOM mengelola data formulir, React yang mengambil alih.

Mengapa Menggunakan Komponen Terkontrol?

1. Sumber Kebenaran Tunggal: Semua data formulir disimpan dalam state komponen.
2. Akses Langsung ke Input: Anda dapat mengakses nilai input segera.
3. Lebih Banyak Kontrol: Anda dapat mudah memanipulasi dan memvalidasi data input.

Sekarang, mari kita merabaikan tangan dengan beberapa kode!

Komponen Terkontrol Dengan Input Tunggal

Mari kita mulai dengan contoh sederhana - field input teks yang menyapa pengguna.

import React, { useState } from 'react';

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

const handleChange = (event) => {
setName(event.target.value);
};

return (
<div>
<input type="text" value={name} onChange={handleChange} />
<p>Hallo, {name}!</p>
</div>
);
}

export default GreetingInput;

Mari kitauraikan ini:

1. Kita mengimpor useState dari React untuk mengelola state komponen kita.
2. Kita menciptakan variabel state name dan fungsi pengubahnya setName.
3. Fungsi handleChange memperbarui state name setiap kali input berubah.
4. Dalam JSX, kita mengatur value input ke name dan menambahkan event handler onChange ke handleChange.
5. Kita menampilkan salam menggunakan nilai name saat ini.

Ini adalah esensi dari komponen terkontrol - React mengontrol nilai input melalui state.

Cobalah Sendiri!

Pergilah dan ketikkan namamu di field input. Perhatikan bagaimana salam terupdate secara instan? Itu adalah keajaiban komponen terkontrol!

Membuat Formulir Sederhana

Sekarang kita sudah menguasai dasarnya, mari kita buat formulir yang lebih kompleks dengan beberapa input.

import React, { useState } from 'react';

function PizzaOrderForm() {
const [order, setOrder] = useState({
name: '',
size: 'medium',
toppings: []
});

const handleChange = (event) => {
const { name, value, type, checked } = event.target;

if (type === 'checkbox') {
if (checked) {
setOrder(prevOrder => ({
...prevOrder,
toppings: [...prevOrder.toppings, value]
}));
} else {
setOrder(prevOrder => ({
...prevOrder,
toppings: prevOrder.toppings.filter(topping => topping !== value)
}));
}
} else {
setOrder(prevOrder => ({
...prevOrder,
[name]: value
}));
}
};

const handleSubmit = (event) => {
event.preventDefault();
alert(`Pesanan ditempatkan! Nama: ${order.name}, Ukuran: ${order.size}, Topping: ${order.toppings.join(', ')}`);
};

return (
<form onSubmit={handleSubmit}>
<input
type="text"
name="name"
value={order.name}
onChange={handleChange}
placeholder="Nama Anda"
/>
<select name="size" value={order.size} onChange={handleChange}>
<option value="small">Kecil</option>
<option value="medium">Medium</option>
<option value="large">Besar</option>
</select>
<label>
<input
type="checkbox"
name="toppings"
value="keju"
checked={order.toppings.includes('keju')}
onChange={handleChange}
/>
Keju
</label>
<label>
<input
type="checkbox"
name="toppings"
value="pepperoni"
checked={order.toppings.includes('pepperoni')}
onChange={handleChange}
/>
Pepperoni
</label>
<button type="submit">Tempatkan Pesanan</button>
</form>
);
}

export default PizzaOrderForm;

Wah, itu banyak kode! Tetapi jangan khawatir, kita akan membongkar ini langkah demi langkah:

1. Kita menciptakan objek state order yang menyimpan semua data formulir kita.
2. Fungsi handleChange sekarang lebih kompleks. Itu menangani jenis input yang berbeda:

• Untuk input teks dan select, itu memperbarui properti yang sesuai di state.
• Untuk checkbox, itu menambahkan atau menghapus topping dari array.

3. Kita memiliki fungsi handleSubmit yang menghindari default perilaku pengiriman formulir dan menampilkan alert dengan detail pesanan.
4. Dalam JSX, kita menciptakan input untuk nama, ukuran (sebagai select), dan topping (sebagai checkbox).
5. Setiap input nilai (atau state checked untuk checkbox) dikendalikan oleh state order.

Kekuatan Formulir Terkontrol

Dengan pengaturan ini, Anda memiliki kontrol penuh terhadap data formulir Anda. Ingin menambahkan validasi? Mudah! Hanya perbarui fungsi handleChange. Butuh untuk transformasi data sebelum pengiriman? Hanya perbarui fungsi handleSubmit. Kemungkinan adalah tak terbatas!

Metode Umum untuk Komponen Terkontrol

Mari kita rangkum beberapa metode umum yang digunakan dengan komponen terkontrol:

Metode	Deskripsi
useState	Hook untuk mengelola state komponen
onChange	Handler event untuk perubahan input
onSubmit	Handler event untuk pengiriman formulir
preventDefault	Menghindari perilaku default pengiriman formulir
event.target.value	Mengambil nilai saat ini dari input
event.target.checked	Mengambil state checked dari checkbox

Kesimpulan

Selamat! Anda baru saja belajar tentang komponen terkontrol di React. Kita telah menelusuri input tunggal, formulir kompleks, dan bahkan menciptakan formulir pesanan pizza (saya mulai hungi hanya berpikir tentang itu!).

Ingat, komponen terkontrol memberikan Anda kekuatan untuk mengelola data formulir dengan presisi. Mungkin awalnya terlihat seperti pekerjaan ekstra, tetapi kontrol dan fleksibilitas yang Anda peroleh sangat berharga.

Dalam perjalanan React Anda, Anda akan menemukan banyak cara untuk menggunakan komponen terkontrol. Mungkin Anda akan menciptakan editor postingan blog, formulir pendaftaran pengguna, atau bahkan aplikasi pengiriman pizza (jika Anda melakukan itu, silakan kirim saya kode diskon!).

Tetap latihan, tetap bersemangat, dan selamat coding!

Credits: Image by storyset