Event di React: onClick, onChange, onSubmit, dan Lainnya

React menangani event dengan props yang dinamai sesuai event-nya dalam camelCase, seperti onClick, onChange, dan onSubmit. Kamu mengirim sebuah fungsi, dan React memanggilnya dengan objek event saat pengguna mengklik, mengetik, atau mengirim form.

import { useState } from 'react';

export default function App() {
    const [likes, setLikes] = useState(0);

    function handleClick() {
        setLikes(likes + 1);
        console.log('Liked');
    }

    return <button onClick={handleClick}>Like ({likes})</button>;
}

Setiap klik menjalankan handleClick, yang memperbarui hitungan dan mencatat log ke konsol di bawah pratinjau. Coba onDoubleClick sebagai pengganti onClick: sekarang hanya klik ganda yang dihitung.

Kirim fungsinya, jangan panggil

Prop ini menerima fungsi, dan React memanggilnya nanti. Kesalahan yang sangat umum adalah menambahkan tanda kurung, yang langsung memanggil fungsinya saat render, lalu menyerahkan nilai kembaliannya ke React.

function sayHi(name) {
    console.log('Hi, ' + name);
}

export default function App() {
    return (
        <div>
            <button onClick={sayHi('during render')}>Wrong</button>{' '}
            <button onClick={() => sayHi('Ada')}>Right</button>
        </div>
    );
}

Konsol menampilkan "Hi, during render" sebelum kamu menyentuh apa pun: React menjalankan sayHi saat merender tombol pertama, dan karena sayHi mengembalikan undefined, tombol itu sama sekali tidak punya handler. Mengklik Wrong tidak melakukan apa pun. Mengklik Right mencatat "Hi, Ada", karena arrow function hanya berjalan saat diklik.

Arrow function juga cara mengirim argumen. onClick={() => removeItem(item.id)} membuat fungsi kecil untuk setiap item, dan fungsi itu memanggil fungsimu dengan ID yang tepat. Jika sebuah handler tidak menerima argumen, kirim dengan namanya saja: onClick={handleClick}.

Dengan setter state, kesalahannya lebih parah: onClick={setCount(count + 1)} mengatur state saat render, yang memicu render lagi, yang mengatur state lagi, dan React berhenti dengan "Too many re-renders".

Objek event

React mengirim satu argumen ke setiap handler, yaitu objek event. Objek ini punya property yang sama dengan event browser: e.target adalah elemen tempat event terjadi, e.key adalah tombol yang ditekan, e.preventDefault() membatalkan aksi default browser. React membungkus event bawaan dalam apa yang disebutnya synthetic event, sehingga perilakunya sama di setiap browser; event aslinya ada di e.nativeEvent kalau suatu saat kamu membutuhkannya.

Dua yang paling sering kamu pakai adalah e.target.value di onChange dan e.key di onKeyDown.

import { useState } from 'react';

export default function App() {
    const [text, setText] = useState('');
    const [tags, setTags] = useState(['react']);

    function handleKeyDown(e) {
        console.log('key:', e.key);
        if (e.key === 'Enter' && text.trim() !== '') {
            setTags([...tags, text.trim()]);
            setText('');
        }
        if (e.key === 'Escape') {
            setText('');
        }
    }

    return (
        <div>
            <input
                value={text}
                onChange={(e) => setText(e.target.value)}
                onKeyDown={handleKeyDown}
                placeholder="Type a tag, press Enter"
            />
            <p>Tags: {tags.join(', ')}</p>
        </div>
    );
}

Ketik hooks lalu tekan Enter: tag-nya ditambahkan dan field-nya dikosongkan. Konsol mencatat setiap tombol, termasuk Shift, Backspace, dan Enter, dengan nama dari e.key. Tekan Escape di tengah sebuah kata untuk membuangnya.

onChange milik React terpicu di setiap ketukan tombol. Di HTML biasa, event change pada field teks hanya terpicu saat field kehilangan fokus, jadi ini perbedaan yang disengaja: input dan state bisa tetap selaras huruf demi huruf. Checkbox memberimu e.target.checked, bukan value. Halaman form membahas setiap jenis input.

Form dan preventDefault

Saat sebuah form dikirim, aksi default browser adalah mengirimnya dan memuat halaman baru. Di aplikasi React, kamu hampir selalu ingin menangani datanya sendiri, jadi handler submit diawali dengan e.preventDefault().

import { useState } from 'react';

export default function App() {
    const [email, setEmail] = useState('');
    const [sent, setSent] = useState(null);

    function handleSubmit(e) {
        e.preventDefault();
        console.log('Subscribing', email);
        setSent(email);
        setEmail('');
    }

    return (
        <form onSubmit={handleSubmit}>
            <input
                name="email"
                type="email"
                required
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                placeholder="you@example.com"
            />{' '}
            <button type="submit">Subscribe</button>
            {sent && <p>Thanks, {sent} is on the list.</p>}
        </form>
    );
}

Taruh onSubmit di <form>, bukan onClick di tombol: dengan begitu menekan Enter di field juga mengirim form, dan pemeriksaan bawaan browser (di sini required dan type="email") berjalan lebih dulu. Hapus baris e.preventDefault() lalu kirim lagi: halaman sungguhan sekarang akan berpindah ke halaman baru dan kehilangan pesan terima kasihnya. Pratinjau memblokir hal itu dan justru menunjukkan apa yang akan dikirim form, email= tanpa nilai, karena setEmail('') sudah mengosongkan field saat form dibaca.

React 19 juga mengizinkanmu mengirim fungsi ke <form action={fn}>, yang menerima data form dan mengatur ulang field yang tidak terkontrol untukmu. Halaman form menunjukkan kedua gaya itu.

Bubbling dan stopPropagation

Sebagian besar event mengalami bubbling: setelah berjalan di elemen yang kamu klik, event itu berjalan di induknya, lalu di induk dari induknya, sampai ke puncak. Handler React mengikuti urutan yang sama. Itulah sebabnya klik pada tombol di dalam kartu yang bisa diklik juga dihitung sebagai klik pada kartu.

const box = { padding: 12, border: '1px solid #bbb', borderRadius: 6, marginTop: 8 };

export default function App() {
    return (
        <div style={box} onClick={() => console.log('3. outer card')}>
            Outer card
            <div style={box} onClick={() => console.log('2. inner panel')}>
                Inner panel
                <div style={{ marginTop: 8 }}>
                    <button onClick={() => console.log('1. button')}>Bubbles up</button>{' '}
                    <button
                        onClick={(e) => {
                            e.stopPropagation();
                            console.log('1. button that stops here');
                        }}
                    >
                        Stops here
                    </button>
                </div>
            </div>
        </div>
    );
}

Klik Bubbles up, dan konsol mencatat tombolnya, lalu panel dalam, lalu kartu luar. Klik Stops here, dan hanya tombolnya yang tercatat: e.stopPropagation() menghentikan perjalanan ke atas. Mengklik teks milik panel dalam mencatat panel dan kartunya.

Pakai stopPropagation secukupnya. Kasus wajar yang umum adalah tombol hapus di dalam baris list yang bisa diklik, di mana mengklik hapus tidak boleh ikut membuka baris itu. Jika induk perlu tahu apakah klik berasal dari anak, periksa e.target, alih-alih menghentikan event-nya. Untuk menjalankan handler di perjalanan turun, sebelum anak-anak melihat event-nya, React menyediakan versi capture seperti onClickCapture.

preventDefault dan stopPropagation adalah alat yang berbeda. Yang pertama membatalkan apa yang akan dilakukan browser (mengikuti link, mengirim form, mencentang checkbox). Yang kedua mencegah handler lain mendengar event itu. Memanggil yang satu tidak melakukan yang lain.

Event umum lainnya

Pola yang sama berlaku untuk setiap event yang didukung React. Beberapa yang akan sering kamu pakai:

• onFocus dan onBlur terpicu saat input mendapat dan kehilangan fokus, berguna untuk menampilkan validasi setelah pengguna meninggalkan sebuah field.
• onMouseEnter dan onMouseLeave terpicu saat pointer masuk ke dan keluar dari sebuah elemen. Berbeda dengan sebagian besar event, keduanya tidak mengalami bubbling, jadi memindahkan pointer dari induk ke anaknya tidak memicu onMouseEnter milik induk lagi.
• onPointerDown, onPointerMove, dan onPointerUp berlaku untuk mouse, sentuhan, dan pen sekaligus, sehingga menjadi pilihan yang lebih baik untuk drag.
• onScroll terpicu saat sebuah elemen digulir. Di React, event ini tidak mengalami bubbling.

Setiap handler menerima objek event dengan property yang sesuai: e.clientX untuk event pointer, e.key untuk event keyboard, e.target untuk semuanya.

Mengirim handler sebagai props

Komponen bisa menerima handler dari induknya seperti prop lain. Beri nama onSomething sesuai apa yang terjadi, dan beri nama fungsi yang menanganinya handleSomething. Ini meniru event bawaan dan membuat jelas props mana yang berupa callback.

import { useState } from 'react';

function Stepper({ value, onIncrement, onDecrement }) {
    return (
        <span>
            <button onClick={onDecrement}>-</button>
            <b style={{ margin: '0 8px' }}>{value}</b>
            <button onClick={onIncrement}>+</button>
        </span>
    );
}

export default function App() {
    const [qty, setQty] = useState(1);

    function handleIncrement() {
        setQty(qty + 1);
    }
    function handleDecrement() {
        setQty(Math.max(0, qty - 1));
    }

    return (
        <p>
            Quantity: <Stepper value={qty} onIncrement={handleIncrement} onDecrement={handleDecrement} />
        </p>
    );
}

Stepper tidak memiliki angkanya; ia melaporkan klik, dan induknya yang memutuskan artinya. Ubah handleDecrement agar berhenti di 1, bukan 0, dan stepper ikut menyesuaikan tanpa diedit. Menyimpan state di induk dan mengirim handler ke bawah adalah pola yang dijelaskan di lifting state up.

Props handler buatan sendiri hanyalah nama. onIncrement pada komponenmu sendiri tidak melakukan apa pun sampai komponen itu mengirimnya ke onClick milik elemen sungguhan, dan kamu bisa memberinya argumen apa pun, misalnya onSelect(item.id).