Event Handling di React — CompileDaily Study

Penjelasan

React menangani event lewat atribut khusus bergaya camelCase (onClick, onChange, onSubmit, dst) yang diisi fungsi — beda dengan HTML biasa yang memakai onclick huruf kecil dan string. Fungsi event handler menerima objek event React (SyntheticEvent) sebagai argumen pertamanya.

Contoh Konsep

function FormSederhana() {
    function handleKlik() {
        alert('Tombol diklik!');
    }

    function handleSubmit(event) {
        event.preventDefault(); // cegah reload halaman default
        console.log('Form disubmit');
    }

    return (
        <form onSubmit={handleSubmit}>
            <button type="button" onClick={handleKlik}>Klik Aku</button>
            <button type="submit">Kirim</button>
        </form>
    );
}

Praktikum

Buat komponen dengan tombol yang, saat diklik, memanggil fungsi handleKlik() yang mencetak "Tombol ditekan!" ke console lewat console.log().

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

Tulis onClick={handleKlik} (TANPA tanda kurung), BUKAN onClick={handleKlik()} — dengan kurung, fungsinya langsung DIPANGGIL saat komponen dirender (bukan saat diklik), kesalahan paling umum bikin bug tak terduga bagi pemula React.