React'te Olaylar: onClick, onChange, onSubmit ve Fazlası

React olayları, olayın adını camelCase olarak taşıyan props ile ele alır: onClick, onChange ve onSubmit gibi. Bir fonksiyon aktarırsın; kullanıcı tıkladığında, yazdığında ya da gönderdiğinde React onu bir olay nesnesiyle çağırır.

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>;
}

Her tıklama handleClick'i çalıştırır; o da sayıyı günceller ve önizlemenin altındaki konsola yazar. onClick yerine onDoubleClick dene: artık yalnızca çift tıklama sayılır.

Fonksiyonu aktar, çağırma

Prop bir fonksiyon alır ve React onu daha sonra çağırır. Çok yaygın bir hata parantez eklemektir; bu, fonksiyonu hemen, render sırasında çağırır ve React'e fonksiyon yerine dönüş değerini verir.

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 sen hiçbir şeye dokunmadan "Hi, during render" gösterir: React ilk düğmeyi render ederken sayHi'yi çalıştırdı ve sayHi undefined döndürdüğü için o düğmenin hiç işleyicisi yok. Wrong'a tıklamak hiçbir şey yapmaz. Right'a tıklamak "Hi, Ada" yazar, çünkü ok fonksiyonu yalnızca tıklamada çalışır.

Ok fonksiyonu aynı zamanda argüman aktarmanın yoludur. onClick={() => removeItem(item.id)} her öğe için küçük bir fonksiyon oluşturur ve o fonksiyon seninkini doğru ID ile çağırır. Bir işleyici argüman almıyorsa onu adıyla aktar: onClick={handleClick}.

Bir state setter ile hata daha da kötüdür: onClick={setCount(count + 1)} render sırasında state ayarlar, bu yeniden render eder, bu da yeniden state ayarlar ve React "Too many re-renders" ile durur.

Olay nesnesi

React her işleyiciye tek bir argüman, olay nesnesini aktarır. Tarayıcının olayıyla aynı özelliklere sahiptir: e.target olayın gerçekleştiği öğedir, e.key basılan tuştur, e.preventDefault() tarayıcının varsayılan eylemini iptal eder. React yerel olayı synthetic event dediği bir şeyle sarar, böylece her tarayıcıda aynı davranır; ihtiyacın olursa orijinali e.nativeEvent'tedir.

En çok kullandıkların onChange içinde e.target.value ve onKeyDown içinde e.key'dir.

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>
    );
}

hooks yaz ve Enter'a bas: etiket eklenir ve alan temizlenir. Konsol Shift, Backspace ve Enter dahil her tuşu e.key içindeki adlarıyla yazar. Bir sözcüğün ortasında Escape'e basarak onu at.

React'in onChange'i her tuş vuruşunda tetiklenir. Düz HTML'de bir metin alanındaki change olayı yalnızca alan odağı kaybettiğinde tetiklenir, yani bu bilinçli bir farktır: input ile state'in harf harf birlikte ilerlemesini sağlar. Onay kutuları value yerine e.target.checked verir. Formlar sayfası her input tipini anlatıyor.

Formlar ve preventDefault

Bir form gönderildiğinde tarayıcının varsayılan eylemi onu göndermek ve yeni bir sayfa yüklemektir. Bir React uygulamasında neredeyse her zaman veriyi kendin ele almak istersin, bu yüzden gönderme işleyicisi e.preventDefault() ile başlar.

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>
    );
}

Düğmeye onClick değil, <form>'a onSubmit koy: o zaman alanda Enter'a basmak da formu gönderir ve tarayıcının kendi kontrolleri (burada required ve type="email") önce çalışır. e.preventDefault() satırını sil ve yeniden gönder: gerçek bir sayfa artık yeni bir sayfaya gider ve teşekkür mesajını kaybederdi. Önizleme bunu engeller ve bunun yerine formun ne göndereceğini gösterir: değeri olmayan email=, çünkü form okunduğunda setEmail('') alanı zaten temizlemişti.

React 19 ayrıca <form action={fn}>'e bir fonksiyon aktarmana izin verir; bu fonksiyon form verisini alır ve kontrolsüz alanları senin için sıfırlar. Formlar sayfası iki stili de gösteriyor.

Kabarcıklanma ve stopPropagation

Çoğu olay kabarcıklanır (bubbling): tıkladığın öğede çalıştıktan sonra ebeveyninde, sonra ebeveyninin ebeveyninde, en üste kadar çalışır. React işleyicileri de aynı sırayı izler. Tıklanabilir bir kartın içindeki bir düğmeye tıklamanın kartta da bir tıklama sayılmasının nedeni budur.

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>
    );
}

Bubbles up'a tıkla; konsol önce düğmeyi, sonra iç paneli, sonra dış kartı yazar. Stops here'a tıkla; yalnızca düğme yazar: e.stopPropagation() tırmanışı bitirir. İç panelin kendi metnine tıklamak paneli ve kartı yazar.

stopPropagation'ı idareli kullan. Yaygın ve meşru bir durum, tıklanabilir bir liste satırının içindeki bir silme düğmesidir; silmeye tıklamak satırı da açmamalıdır. Bir ebeveynin tıklamanın bir çocuktan gelip gelmediğini bilmesi gerekiyorsa olayı durdurmak yerine e.target'ı kontrol et. Bir işleyiciyi aşağı inerken, çocuklar olayı görmeden önce çalıştırmak için React onClickCapture gibi capture sürümleri sunar.

preventDefault ve stopPropagation farklı araçlardır. İlki tarayıcının yapacağı şeyi (bir bağlantıyı izlemek, bir formu göndermek, bir onay kutusunu işaretlemek) iptal eder. İkincisi diğer işleyicilerin olaydan haberdar olmasını engeller. Birini çağırmak diğerini yapmaz.

Diğer yaygın olaylar

Aynı kalıp React'in desteklediği her olayı kapsar. Sık kullanacağın birkaçı:

• onFocus ve onBlur, bir input odak kazandığında ve kaybettiğinde tetiklenir; kullanıcı bir alandan ayrıldıktan sonra doğrulamayı göstermek için kullanışlıdır.
• onMouseEnter ve onMouseLeave, işaretçi bir öğenin üstüne geldiğinde ve üstünden çıktığında tetiklenir. Çoğu olayın aksine kabarcıklanmazlar, bu yüzden işaretçiyi bir ebeveynden çocuğuna taşımak ebeveynin onMouseEnter'ını yeniden tetiklemez.
• onPointerDown, onPointerMove ve onPointerUp fare, dokunma ve kalem için aynı şekilde çalışır; bu da onları sürükleme için daha iyi bir seçim yapar.
• onScroll, bir öğe kaydırıldıkça tetiklenir. React'te kabarcıklanmaz.

Her işleyici kendisi için anlamlı özelliklere sahip bir olay nesnesi alır: işaretçi olayları için e.clientX, klavye olayları için e.key, hepsi için e.target.

İşleyicileri prop olarak aktarmak

Bileşenler ebeveynlerinden işleyicileri diğer her prop gibi kabul edebilir. Onları olan şeye göre onSomething diye, onu ele alan fonksiyonu da handleSomething diye adlandır. Bu, yerleşik olayları yansıtır ve hangi props'un callback olduğunu açıkça gösterir.

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>
    );
}

Sayının sahibi Stepper değildir; o tıklamaları bildirir, ne anlama geldiklerine ebeveyn karar verir. handleDecrement'i 0 yerine 1'de duracak şekilde değiştir; stepper düzenlenmeden onu takip eder. State'i ebeveynde tutup işleyicileri aşağı aktarmak, state'i yukarı taşımak sayfasında anlatılan kalıptır.

Özel işleyici props sadece adlardır. Kendi bileşenindeki onIncrement, bileşen onu gerçek bir öğenin onClick'ine aktarana kadar hiçbir şey yapmaz ve ona istediğin argümanları verebilirsin, örneğin onSelect(item.id).