ReactJS - Komponen Tak Terkontrol

Hai, para pemula pemrograman! Hari ini, kita akan melihat dunia ReactJS dan mengexplore konsep yang disebut "Komponen Tak Terkontrol." Jangan khawatir jika Anda baru saja memulai pemrograman – saya akan memandu Anda langkah demi langkah, seperti yang saya lakukan bagi ribuan murid selama tahun-tahun ini. Jadi, ambil secangkir minuman kesukaan Anda, dan mari kita mulai perjalanan yang menarik ini bersama!

Apa Itu Komponen Tak Terkontrol?

Sebelum kita masuk ke detail, mari kita pahami apa itu komponen tak terkontrol dalam React. Bayangkan Anda mengisi formulir kertas – Anda menulis informasi Anda, dan saat Anda selesai, Anda mengirimkannya. Itu sebenarnya seperti bagaimana komponen tak terkontrol bekerja dalam React!

Dalam React, komponen tak terkontrol adalah elemen formulir yang mengelola state-nya secara internal, bukan oleh React. Itu seperti memberikan elemen formulir kebebasan berfikir sendiri!

Pemrograman Formulir dalam Komponen Tak Terkontrol

Sekarang, mari kita kerjakan tangan dan merumuskan beberapa kode. Kita akan mulai dengan contoh sederhana untuk mengilustrasikan bagaimana komponen tak terkontrol bekerja dalam pemrograman formulir.

Input Tak Terkontrol Dasar

Ini adalah contoh dasar dari input tak terkontrol:

import React from 'react';

function SimpleForm() {
return (
<form>
<label htmlFor="name">Nama:</label>
<input type="text" id="name" name="name" />
</form>
);
}

export default SimpleForm;

Dalam contoh ini, kita memiliki formulir sederhana dengan input teks untuk nama. Catat bahwa kita tidak memiliki state atau handler onChange? Itu karena input mengelola state-nya secara internal.

Mengakses Nilai Input

Tunggu, Anda mungkin bertanya, "Bagaimana kita mendapatkan nilai input jika React tidak mengelolanya?" Pertanyaan bagus! Kita dapat menggunakan ref untuk mengakses node DOM secara langsung. Mari kita modifikasi contohnya:

import React, { useRef } from 'react';

function SimpleForm() {
const inputRef = useRef(null);

const handleSubmit = (event) => {
event.preventDefault();
alert('Sebuah nama dikirim: ' + inputRef.current.value);
};

return (
<form onSubmit={handleSubmit}>
<label htmlFor="name">Nama:</label>
<input type="text" id="name" name="name" ref={inputRef} />
<button type="submit">Kirim</button>
</form>
);
}

export default SimpleForm;

Dalam versi ini, kita menggunakan hook useRef untuk membuat referensi ke input kita. Saat formulir dikirim, kita dapat mengakses nilai input menggunakan inputRef.current.value.

Membuat Formulir Sederhana

Sekarang kita mengerti dasar-dasar, mari kita buat formulir yang lebih komprehensif menggunakan komponen tak terkontrol.

Formulir Multi-Input

import React, { useRef } from 'react';

function ComplexForm() {
const nameRef = useRef(null);
const emailRef = useRef(null);
const messageRef = useRef(null);

const handleSubmit = (event) => {
event.preventDefault();
const formData = {
name: nameRef.current.value,
email: emailRef.current.value,
message: messageRef.current.value
};
console.log('Data formulir:', formData);
// Di sini Anda biasanya mengirim data ke server
};

return (
<form onSubmit={handleSubmit}>
<div>
<label htmlFor="name">Nama:</label>
<input type="text" id="name" name="name" ref={nameRef} required />
</div>
<div>
<label htmlFor="email">Email:</label>
<input type="email" id="email" name="email" ref={emailRef} required />
</div>
<div>
<label htmlFor="message">Pesan:</label>
<textarea id="message" name="message" ref={messageRef} required />
</div>
<button type="submit">Kirim Pesan</button>
</form>
);
}

export default ComplexForm;

Dalam contoh ini, kita telah membuat formulir dengan tiga field: nama, email, dan pesan. Setiap field memiliki ref sendiri, memungkinkan kita mengakses nilai field saat formulir dikirim.

Penjelasan

1. Kita membuat refs untuk setiap input menggunakan useRef.
2. Dalam fungsi handleSubmit, kita mencegah perilaku default pengiriman formulir dan mengumpulkan nilai dari setiap input menggunakan refs-nya.
3. Kita kemudian mencatat data formulir ke konsol (dalam aplikasi nyata, Anda biasanya mengirim data ini ke server).

Keuntungan dan Kerugian Komponen Tak Terkontrol

Mari kitaambil waktu untuk mendiskusikan keuntungan dan kerugian penggunaan komponen tak terkontrol:

Keuntungan	Kerugian
Kode yang sederhana untuk formulir dasar	Kurang kontrol terhadap nilai formulir
Bisa berguna untuk mengintegrasikan dengan kode atau pustaka non-React	sulit untuk mengimplementasikan validasi formulir dinamis
Potensi performa yang lebih baik untuk formulir yang sangat besar	Tidak mudah mengatur nilai formulir secara program
Bekerja baik dengan input file	Kurang "seperti React" - tidak mengikuti prinsip "single source of truth"

Kapan Menggunakan Komponen Tak Terkontrol

Komponen tak terkontrol dapat berguna dalam beberapa konteks:

1. Ketika mengintegrasikan dengan kode atau pustaka non-React
2. Untuk formulir sederhana di mana Anda tidak memerlukan validasi atau pembaruan dinamis
3. Ketika bekerja dengan input file (yang secara inheren tak terkontrol)

Namun, untuk kebanyakan aplikasi React, komponen terkontrol (di mana React mengelola state formulir) biasanya lebih disukai karena mereka memberikan lebih banyak kontrol dan lebih sesuai dengan filosofi React.

Kesimpulan

Dan itu dia, teman-teman! Kita telah mengembara melalui negeri komponen tak terkontrol di React. Ingat, seperti memilih antara mobil manual dan otomatis, pilihan antara komponen terkontrol dan tak terkontrol tergantung pada kebutuhan khusus Anda.

Saat kita mengakhiri, saya teringat tentang murid yang pernah berkata kepadaku, "React seperti memasak – kadang-kadang Anda butuh ukuran tepat, dan kadang-kadang Anda bisa menembaknya." Komponen tak terkontrol adalah seperti menembaknya – mereka memiliki tempat mereka, tapi gunakan mereka bijak!

Saya harap panduan ini telah menerangi jalan komponen tak terkontrol bagi Anda. Terus latih, terus kode, dan ingat – di dunia pemrograman, setiap kesalahan adalah batu loncatan menuju kesuksesan!

Selamat berkoding, para master React masa depan!

Credits: Image by storyset