Intermediate · Level 7: React FundamentalsIntermediate45 menitBahasa Indonesia

Event Handling

Merespons aksi user seperti click dan input change dengan event handler React.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Menjelaskan event handler sebagai function untuk merespons interaksi
Memasang onClick pada button
Memasang onChange pada input untuk memperbarui state

ReactEventsInput

Isi lesson

5 blok

1.
Event handler menghubungkan user dan stateBelum selesaiWajib
2.
Click dan input changeBelum selesaiWajib
3.
Kirim function, jangan hasil functionBelum selesaiWajib
4.
Coding practiceBelum selesaiWajib
5.
RingkasanBelum selesaiWajib

Event handler menghubungkan user dan state

Wajib

State menyimpan value yang berubah. Event handler adalah function yang berjalan saat user melakukan aksi, misalnya klik button atau mengetik di input.

Di React, nama event biasanya memakai camelCase: `onClick`, `onChange`, `onSubmit`. Kamu mengirim function ke event tersebut, bukan memanggil function langsung saat render.

Bagian ini memengaruhi progres lesson.

Click dan input change

Wajib

tsx

import { useState } from "react";

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

  function handleReset() {
    setName("");
  }

  return (
    <section>
      <input value={name} onChange={(event) => setName(event.target.value)} />
      <p>Halo, {name || "teman"}.</p>
      <button type="button" onClick={handleReset}>
        Reset
      </button>
    </section>
  );
}

`onChange` membaca value input terbaru dan menyimpannya ke state. `onClick` menjalankan function reset saat button diklik.

Bagian ini memengaruhi progres lesson.

Peringatan

Wajib

Kirim function, jangan hasil function

Tulis `onClick={handleReset}`, bukan `onClick={handleReset()}`. Bentuk kedua memanggil function saat render, bukan saat user klik.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Tambahkan button dan input interactions

Latihan memasang onClick dan onChange untuk mengubah state dari aksi user.

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.

6 cek otomatis4 checklist

Belum selesaiBuka practice

Ringkasan

Wajib

Event handler adalah function yang merespons aksi user.
React memakai camelCase event seperti `onClick` dan `onChange`.
Input controlled memakai `value` dari state dan `onChange` untuk update state.
Jangan memanggil handler saat render jika tujuannya menunggu user action.
Berikutnya, kamu akan menampilkan UI berbeda berdasarkan state.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Event handler menghubungkan user dan state.

Memuat progres Review module