ReactJS - Komponen Tak Terkontrol

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

Apa Itu Komponen Tak Terkontrol?

Sebelum kita masuk ke detilnya, 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 adalah cara kerja komponen tak terkontrol 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 roll up lengan dan merapat tangannya dengan 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 sebentar, Anda mungkin bertanya, "Bagaimana kita mendapatkan nilai input jika React tidak mengelola itu?" 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">Submit</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 dasarnya, 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 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 ref untuk setiap input menggunakan useRef.
2. Dalam fungsi handleSubmit, kita mencegah perilaku bawaan pengiriman formulir dan mengumpulkan nilai dari setiap input menggunakan ref mereka.
3. Kita kemudian mencatat data formulir ke console (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 lebih sederhana untuk formulir dasar	Kurang kontrol atas nilai formulir
Bisa berguna untuk mengintegrasikan dengan kode atau pustaka non-React	Lebih sulit untuk implementasi validasi formulir dinamis
Performa yang mungkin lebih baik untuk formulir sangat besar	Tidak mudah mengatur nilai formulir secara program
Bekerja baik dengan input file	Kurang "seperti React" - tidak mengikuti prinsip sumber kebenaran tunggal

Kapan untuk Menggunakan Komponen Tak Terkontrol

Komponen tak terkontrol bisa berguna dalam beberapa konteks:

1. Saat mengintegrasikan dengan kode atau pustaka non-React
2. Untuk formulir sederhana yang tidak memerlukan validasi atau pembaruan dinamis
3. Saat 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 memberikan lebih banyak kontrol dan mengikuti filosofi React.

Kesimpulan

Dan itu adalah dia, teman-teman! Kita telah berpergian melalui negeri komponen tak terkontrol dalam 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 siswa yang pernah katakan kepadaku, "React seperti memasak – kadang-kadang Anda butuh ukuran yang tepat, dan kadang-kadang Anda bisa menembaknya." Komponen tak terkontrol adalah seperti menembaknya – mereka memiliki tempat mereka, tapi gunakan mereka bijaksana!

Saya harap panduan ini telah menerangi jalan komponen tak terkontrol bagi Anda. Tetap latih, tetap coding, dan ingat – di dunia programming, setiap kesalahan adalah batu loncatan menuju kesuksesan!

Selamat coding, para master React masa depan!

Credits: Image by storyset