React Formları: Input, Checkbox, Select ve Doğrulama

Bir React formu her alanın değerini state'te tutar: input value={state} gösterir ve onu onChange ile günceller. Kullanıcı formu gönderdiğinde bir onSubmit işleyicisi sayfa yenilenmesini durdurmak için e.preventDefault() çağırır ve sonra zaten state'te olan değerleri kullanır.

import { useState } from 'react';

export default function App() {
    const [name, setName] = useState('');
    const [greeting, setGreeting] = useState('');

    function handleSubmit(e) {
        e.preventDefault();
        setGreeting(`Hello, ${name || 'stranger'}!`);
    }

    return (
        <form onSubmit={handleSubmit}>
            <label>
                Name{' '}
                <input name="name" value={name} onChange={(e) => setName(e.target.value)} />
            </label>{' '}
            <button type="submit">Say hello</button>
            <p>{greeting}</p>
        </form>
    );
}

Bir ad yaz ve Enter'a bas ya da düğmeye tıkla. Sonra e.preventDefault(); satırını sil: önizleme, tarayıcının yerel bir gönderimde göndereceği alanları gösterir; gerçek bir sayfada bu ayrıca sayfayı yeniden yüklerdi.

Değeri state'ten gelen bir input'a kontrollü input (controlled input) denir. Alternatifi, yani değeri DOM'un tutmasına izin verip sonra okumak, kontrollü ve kontrolsüz bileşenler sayfasında anlatılıyor.

Metin input'ları ve textarea

Her metin alanı aynı şekilde çalışır: value state'ten gelir, onChange e.target.value'yu okur. Bir <textarea> da aynı kalıbı izler. HTML'de metni etiketlerin arasına yazılır, ama React'te onu value olarak aktarırsın.

import { useState } from 'react';

export default function App() {
    const [title, setTitle] = useState('');
    const [body, setBody] = useState('');

    return (
        <div style={{ display: 'grid', gap: 8, maxWidth: 320 }}>
            <input
                value={title}
                onChange={(e) => setTitle(e.target.value.toUpperCase())}
                placeholder="Title (shouts)"
            />
            <textarea
                value={body}
                onChange={(e) => setBody(e.target.value)}
                rows={4}
                maxLength={140}
                placeholder="Up to 140 characters"
            />
            <small>{140 - body.length} characters left</small>
        </div>
    );
}

Değeri kendin ayarladığın için kullanıcının yazdığını görünmeden önce değiştirebilirsin: başlık alanı her harfi büyük harfe çevirir. Karakter sayacı her tuş vuruşunda güncellenir, çünkü body state'tir ve her değişiklik yeniden render eder.

Select

Bir <select>, bir option üzerinde selected değil, select öğesinin kendisinde value alır. e.target.value, seçilen option'ın value'sudur.

import { useState } from 'react';

export default function App() {
    const [plan, setPlan] = useState('monthly');
    const prices = { monthly: '$12 a month', yearly: '$99 a year', free: '$0' };

    return (
        <div>
            <select value={plan} onChange={(e) => setPlan(e.target.value)}>
                <option value="free">Free</option>
                <option value="monthly">Monthly</option>
                <option value="yearly">Yearly</option>
            </select>
            <p>You pay {prices[plan]}.</p>
        </div>
    );
}

Çoklu seçim için multiple ekle ve value olarak bir dizi aktar. Seçimleri Array.from(e.target.selectedOptions, (o) => o.value) ile oku.

Onay kutusu ve radyo düğmeleri

Bir onay kutusu value ile değil checked ile kontrol edilir ve işleyicisi true ya da false olan e.target.checked'i okur. Bir gruptaki radyo düğmeleri bir name paylaşır; her biri, state kendi değerine eşit olduğunda işaretlidir.

import { useState } from 'react';

export default function App() {
    const [newsletter, setNewsletter] = useState(false);
    const [size, setSize] = useState('m');

    return (
        <div>
            <label>
                <input
                    type="checkbox"
                    checked={newsletter}
                    onChange={(e) => setNewsletter(e.target.checked)}
                />
                Send me the newsletter
            </label>

            <p>Shirt size:</p>
            {['s', 'm', 'l'].map((s) => (
                <label key={s} style={{ marginInlineEnd: 12 }}>
                    <input
                        type="radio"
                        name="size"
                        value={s}
                        checked={size === s}
                        onChange={(e) => setSize(e.target.value)}
                    />
                    {s.toUpperCase()}
                </label>
            ))}

            <p>
                Size {size.toUpperCase()}, newsletter {newsletter ? 'on' : 'off'}.
            </p>
        </div>
    );
}

Bir onay kutusunda e.target.value okumak yaygın bir hatadır: value özelliği olmayan bir onay kutusu için, kutu işaretli olsun ya da olmasın "on" metnini döndürür.

Birçok alan için tek bir state nesnesi

On alanlı bir formun on useState çağrısına ve on işleyiciye ihtiyacı yoktur. Tek bir nesne tut, her input'a bir anahtarla eşleşen bir name ver ve adı hesaplanmış bir anahtar olarak kullanan tek bir işleyici yaz: [e.target.name].

import { useState } from 'react';

export default function App() {
    const [form, setForm] = useState({
        email: '',
        country: 'NO',
        terms: false,
    });

    function handleChange(e) {
        const { name, type, value, checked } = e.target;
        setForm({ ...form, [name]: type === 'checkbox' ? checked : value });
    }

    return (
        <div style={{ display: 'grid', gap: 8, maxWidth: 280 }}>
            <input name="email" value={form.email} onChange={handleChange} placeholder="Email" />
            <select name="country" value={form.country} onChange={handleChange}>
                <option value="NO">Norway</option>
                <option value="JP">Japan</option>
                <option value="BR">Brazil</option>
            </select>
            <label>
                <input name="terms" type="checkbox" checked={form.terms} onChange={handleChange} />
                I accept the terms
            </label>
            <pre>{JSON.stringify(form, null, 2)}</pre>
        </div>
    );
}

İşleyici input tipini kontrol eder; böylece onay kutusu bir boolean, diğerleri metin saklar. Başlangıç nesnesine bir anahtar ve aynı name'e sahip bir input ekleyerek bir alan ekle; işleyicinin değişmesi gerekmez. Spread diğer her alanı korur (bkz. dizileri ve nesneleri güncellemek).

Bir formu göndermek

Gönderme mantığını düğmenin onClick'ine değil, formun onSubmit'ine koy. onSubmit, kullanıcı bir metin alanında Enter'a bastığında da tetiklenir; bir tıklama işleyicisi bunu kaçırırdı. Bir formun içindeki <button> varsayılan olarak bir gönder düğmesidir; diğer düğmelere göndermemeleri için type="button" ver.

import { useState } from 'react';

export default function App() {
    const [form, setForm] = useState({ user: 'ada', password: '' });

    function handleChange(e) {
        setForm({ ...form, [e.target.name]: e.target.value });
    }

    function handleSubmit(e) {
        e.preventDefault();
        console.log('submitting', form);
    }

    return (
        <form onSubmit={handleSubmit}>
            <input name="user" value={form.user} onChange={handleChange} />{' '}
            <input name="password" type="password" value={form.password} onChange={handleChange} />{' '}
            <button type="button" onClick={() => setForm({ user: '', password: '' })}>
                Clear
            </button>{' '}
            <button type="submit">Log in</button>
        </form>
    );
}

Konsolu aç, bir parola yaz ve Enter'a bas: form tüm nesneyi kaydeder. "Clear"a tıklamak hiçbir şey kaydetmez, çünkü type="button"'dur. O özelliği kaldır; Clear da göndermeye başlar.

Doğrulama ve hataları göstermek

Basit doğrulama, değerleri alıp bir mesaj nesnesi döndüren bir fonksiyondur. Onu gönderimde çalıştır, sonucu state'te sakla ve her mesajı alanının altında göster. Çift tıklamanın formu iki kez göndermemesi için bir istek çalışırken gönder düğmesini devre dışı bırak.

import { useState } from 'react';

function validate({ email, age }) {
    const errors = {};
    if (!email.includes('@')) errors.email = 'Enter a valid email.';
    if (!age || Number(age) < 13) errors.age = 'You must be 13 or older.';
    return errors;
}

function saveProfile(data) {
    return new Promise((resolve) => setTimeout(() => resolve(data), 800));
}

export default function App() {
    const [form, setForm] = useState({ email: '', age: '' });
    const [errors, setErrors] = useState({});
    const [status, setStatus] = useState('idle');

    async function handleSubmit(e) {
        e.preventDefault();
        const found = validate(form);
        setErrors(found);
        if (Object.keys(found).length > 0) return;
        setStatus('saving');
        await saveProfile(form);
        setStatus('saved');
    }

    const change = (e) => setForm({ ...form, [e.target.name]: e.target.value });
    const error = { color: 'crimson', margin: '4px 0 8px', fontSize: 13 };

    return (
        <form onSubmit={handleSubmit} noValidate>
            <input name="email" value={form.email} onChange={change} placeholder="Email" />
            {errors.email && <p style={error}>{errors.email}</p>}
            <input name="age" type="number" value={form.age} onChange={change} placeholder="Age" />
            {errors.age && <p style={error}>{errors.age}</p>}
            <div style={{ marginTop: 8 }}>
                <button disabled={status === 'saving'}>
                    {status === 'saving' ? 'Saving...' : 'Save'}
                </button>
                {status === 'saved' && ' Saved.'}
            </div>
        </form>
    );
}

Alanlar boşken Save'e tıkla ve iki mesajı da gör, sonra alanları doldur. saveProfile gerçek bir isteğin yerine geçer: 800 milisaniye bekler ve resolve olur. noValidate özelliği tarayıcının kendi doğrulama balonlarını kapatır, böylece yalnızca senin mesajların görünür; karşılaştırmak için onu kaldır ve bir input'a required ekle.

Hatalar saklanmak yerine render sırasında da hesaplanabilir, örneğin const emailError = form.email && !form.email.includes('@'); bu, kullanıcı yazarken mesajı gösterir. Forma uyan zamanlamayı seç: gönderimde göstermek daha sakindir, yazarken göstermek daha hızlı geri bildirim verir.

React 19'da form action'ları

React 19 bir formu ele almanın başka bir yolunu ekler. Formun action prop'una bir fonksiyon aktar. React sayfa yenilenmesini senin için engeller ve fonksiyonu name'i olan her alanı tutan bir FormData nesnesiyle çağırır. Alanların hiç state'e ihtiyacı yoktur: kontrolsüzdürler ve React action bittikten sonra onları temizler.

import { useState } from 'react';

function addComment(text) {
    return new Promise((resolve) => setTimeout(() => resolve(text), 500));
}

export default function App() {
    const [comments, setComments] = useState([]);

    async function postComment(formData) {
        const text = formData.get('comment');
        console.log('action received', text);
        const saved = await addComment(text);
        setComments((list) => [...list, saved]);
    }

    return (
        <form action={postComment}>
            <input name="comment" defaultValue="Nice docs" />{' '}
            <button type="submit">Post</button>
            <ul>
                {comments.map((c, i) => (
                    <li key={i}>{c}</li>
                ))}
            </ul>
        </form>
    );
}

Kendi yorumunu yaz ve gönder. Liste senin metnini gösterir ve input Nice docs'a geri döner: action resolve olduktan sonra React kontrolsüz alanları defaultValue'larına sıfırlar. Action async olabilir ve çalışırken React güncellemeyi bir transition olarak ele alır.

Action'dan bir bekleme durumu ya da bir hata göstermek için onu useActionState ile sar; bu en son sonucu, form için sarılmış bir action'ı ve bir isPending bayrağını döndürür. Formun derinlerindeki bir düğme de bekleme durumunu react-dom'dan useFormStatus ile okuyabilir:

import { useFormStatus } from 'react-dom';

function SubmitButton() {
    const { pending } = useFormStatus();
    return <button disabled={pending}>{pending ? 'Posting...' : 'Post'}</button>;
}

useFormStatus buradaki editörlerde yüklü değil, bu yüzden yalnızca bu statik blokta görünüyor. Formu render eden bileşende değil, <form>'un içinde render edilen bir bileşenden çağrılmalıdır.

onSubmit ile kontrollü state ve FormData ile form action'ları React 19'da ikisi de çalışır. Kontrollü alanlar sen yazarken tepki veren formlara uyar (canlı doğrulama, karakter sayacı, birbirine bağlı alanlar). Action'lar ise değerlere yalnızca kullanıcı gönderdiğinde ihtiyaç duyduğun formlara uyar.