Intermediate · Level 7: React FundamentalsIntermediate45 menitBahasa Indonesia

Controlled Inputs

Menghubungkan value input dengan state agar React menjadi sumber kebenaran untuk field form.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Menjelaskan controlled input sebagai input yang value-nya dikendalikan state
Menghubungkan value input ke state
Memakai onChange untuk memperbarui state saat user mengetik

ReactFormsControlled Input

Isi lesson

6 blok

1.
Input bisa dikendalikan oleh stateBelum selesaiWajib
2.
Text input yang mengikuti stateBelum selesaiWajib
3.
Jangan pasang value tanpa onChangeBelum selesaiWajib
4.
Coding practiceBelum selesaiWajib
5.
Cek pemahamanBelum selesaiWajib
6.
RingkasanBelum selesaiWajib

Input bisa dikendalikan oleh state

Wajib

Di HTML biasa, input menyimpan value-nya sendiri di browser. Di React, kita sering membuat controlled input: value input dibaca dari state, lalu setiap perubahan input mengupdate state.

Pola ini membuat React tahu isi field saat ini. Nanti saat form disubmit, divalidasi, atau dipakai untuk menampilkan preview, component tidak perlu menebak isi input dari DOM.

Bagian ini memengaruhi progres lesson.

Text input yang mengikuti state

Wajib

tsx

import { useState } from "react";

function NameField() {
  const [name, setName] = useState("");

  return (
    <section>
      <label>
        Nama
        <input value={name} onChange={(event) => setName(event.target.value)} />
      </label>
      <p>Preview: {name || "Belum diisi"}</p>
    </section>
  );
}

`value={name}` membuat input membaca state. `onChange` menyimpan teks terbaru ke state setiap kali user mengetik.

Bagian ini memengaruhi progres lesson.

Kesalahan umum

Wajib

Jangan pasang value tanpa onChange

Jika input punya `value` dari state tetapi tidak punya `onChange`, field bisa terasa terkunci. Untuk controlled input, selalu pikirkan pasangan: value membaca state, onChange mengubah state.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Buat controlled text input

Latihan menghubungkan input title dengan state dan menampilkan preview dari value terbaru.

Tujuan awal: Fokus di tab TSX.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

5 cek otomatis4 checklist

Belum selesaiBuka practice

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Apa pasangan utama dalam controlled input React?

Progres lesson naik setelah jawaban benar.

Ringkasan

Wajib

Controlled input adalah input yang value-nya dibaca dari state.
`onChange` menyimpan perubahan input ke state.
Pola value + onChange membuat isi field mudah dipakai untuk preview, submit, atau validasi sederhana.
Input yang punya value tanpa onChange bisa terasa terkunci.
Berikutnya, kamu akan menangani submit form tanpa reload halaman.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Input bisa dikendalikan oleh state.

Memuat progres Review module