ReactJS - Komponen Terkendal: Panduan untuk Pemula

Hai sana, para pengembang React masa depan! Hari ini, kita akan memulai perjalanan menarik ke dunia Komponen Terkendal di ReactJS. Jangan khawatir jika Anda baru belajar programming - saya akan menjadi panduan Anda, dan kita akan berjalan langkah demi langkah. Pada akhir tutorial ini, Anda akan menciptakan formulir seperti seorang pro!

Apa Itu Komponen Terkendal?

Sebelum kita mendalam, mari mulai dengan analogi sederhana. Bayangkan Anda berada di restoran mewah, dan Anda ingin memesan pizza custom. Dalam scenario 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 terkendal bekerja di React!

Dalam istilah React, komponen terkendal adalah elemen input formulir yang nilaiannya dikendalikan oleh React. instead of the DOM handling the form data, React takes charge.

Mengapa Menggunakan Komponen Terkendal?

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

Sekarang, mari kita mulai dengan kode!

Komponen Terkendal Dengan Input Tunggal

Mari 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>Hello, {name}!</p>
</div>
);
}

export default GreetingInput;

Mari kitauraikan ini:

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

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

Cobalah Sendiri!

Pergilah dan ketikkan namamu di field input. Perhatikan bagaimana salamnya diperbarui secara instan? Itu adalah keajaiban komponen terkendal!

Membuat Formulir Sederhana

Sekarang kita telah menguasai dasar-dasar, 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(`Order placed! Name: ${order.name}, Size: ${order.size}, Toppings: ${order.toppings.join(', ')}`);
};

return (
<form onSubmit={handleSubmit}>
<input
type="text"
name="name"
value={order.name}
onChange={handleChange}
placeholder="Your Name"
/>
<select name="size" value={order.size} onChange={handleChange}>
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
</select>
<label>
<input
type="checkbox"
name="toppings"
value="cheese"
checked={order.toppings.includes('cheese')}
onChange={handleChange}
/>
Cheese
</label>
<label>
<input
type="checkbox"
name="toppings"
value="pepperoni"
checked={order.toppings.includes('pepperoni')}
onChange={handleChange}
/>
Pepperoni
</label>
<button type="submit">Place Order</button>
</form>
);
}

export default PizzaOrderForm;

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

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

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

3. Kita punya fungsi handleSubmit yang menghalangi perilaku default pengiriman formulir dan menampilkan alert dengan detail order.
4. Dalam JSX, kita membuat input untuk nama, ukuran (sebagai pilihan), dan topping (sebagai checkbox).
5. Nilai setiap input (atau state checked untuk checkbox) dikendalikan oleh state order.

Kuasa Formulir Terkendal

Dengan setup ini, Anda memiliki kontrol penuh atas data formulir Anda. Ingin menambahkan validasi? Mudah! cukup ubah fungsi handleChange. Butuh transformasi data sebelum pengiriman? cukup update fungsi handleSubmit. kemungkinannya tak terbatas!

Metode Umum untuk Komponen Terkendal

Mari rangkum beberapa metode umum yang digunakan dengan komponen terkendal:

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

Kesimpulan

Selamat! Anda telah belajar tentang komponen terkendal di React. Kita telah menelurkan input tunggal, formulir kompleks, dan bahkan membuat formulir pesanan pizza (saya mulai merasa hungry hanya berpikir tentangnya!).

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

Buatlanjutkan perjalanan React Anda, tetap curi-curi, dan selamat coding!

Credits: Image by storyset