- Konu sahibi
- #1
Controlled input değerini React state’inde tutar;
Controlled yaklaşımda input’un görünen değeri state’ten gelir. Kullanıcı yazdığında
Bu bileşeni React uygulamanızdaki bir sayfaya veya
Controlled yaklaşım; anlık doğrulama, karakter sınırı, koşullu alan gösterme, butonu etkinleştirme veya başka bileşenlerle aynı değeri paylaşma gibi durumlarda daha elverişlidir. Bunun karşılığında her değişiklik React state güncellemesi oluşturur ve input’un davranışını uygulama kodu yönetir.
Uncontrolled input’ta güncel değer React state’inde tutulmaz. Input kendi değerini DOM içinde saklar. Başlangıç değeri için
Bu örnekte kullanıcı yazarken React state güncellenmez. Gönder düğmesine basıldığında
İki kod bloğu alternatif, ayrı default-export bileşenleridir; aynı dosyaya iki default export olarak yapıştırmayın. Metin alanındaki value/defaultValue ayrımı, checkbox ve radio için checked/defaultChecked şeklindedir. Dosya seçme alanının değeri tarayıcı tarafından yönetilir; normal metin alanı gibi istediğiniz dosya yoluna controlled value atamayın.
Kararı yalnız kod miktarına göre değil, değere ne zaman ve kim tarafından ihtiyaç duyulduğuna göre verin.
Controlled kullanacaksanız her alanın başlangıç state’ini belirleyin; örneğin metin alanı için
Uncontrolled formu FormData ile okuyacaksanız alanlara name ekleyin; name olmadan form verisi içinde ilgili anahtar oluşmaz. Ref ile doğrudan value okuma ise name zorunluluğundan farklıdır. Her iki yaklaşımda da istemci değerleri sunucu tarafında yeniden doğrulanır.
value ve onChange ile her değişikliği React yönetir. Uncontrolled input ise değeri DOM’un kendi içinde tutar; başlangıç değeri defaultValue ile verilir ve son değer gerektiğinde ref veya name verilmiş kontroller için FormData üzerinden okunabilir. Kullanıcı arayüzüyle değer sürekli senkron tutulacaksa controlled, basit form toplama veya daha az React kodu gerekiyorsa uncontrolled yaklaşım uygundur.Controlled input nasıl çalışır?
Controlled yaklaşımda input’un görünen değeri state’ten gelir. Kullanıcı yazdığında
onChange çalışır, state güncellenir ve React yeni değeri input’a verir. Böylece React, input’un mevcut değerinin tek kaynağı olur.
Kod:
import { useState } from "react";
export default function ControlledForm() {
const [name, setName] = useState("");
function handleSubmit(event) {
event.preventDefault();
alert(`Girilen ad: ${name}`);
}
return (
<form onSubmit={handleSubmit}>
<label>
Adınız
<input
value={name}
onChange={(event) => setName(event.target.value)}
/>
</label>
<button type="submit">Gönder</button>
<p>Metin uzunluğu (UTF-16): {name.length}</p>
</form>
);
}Bu bileşeni React uygulamanızdaki bir sayfaya veya
App bileşenine yerleştirip çalıştırdığınızda yazılan metin hem input’ta hem de UTF-16 uzunluğunda anında görünür. JavaScript length, emoji gibi bazı görünen karakterleri birden fazla kod birimi sayabilir; bu çıktı kullanıcıya görünen karakterlerin kesin sayısı değildir. Form gönderildiğinde name state’inin son değeri kullanılır. value verip onChange tanımlamazsanız input salt okunur davranabilir; kullanıcı yazabilsin istiyorsanız ikisini birlikte kullanın.Controlled yaklaşım; anlık doğrulama, karakter sınırı, koşullu alan gösterme, butonu etkinleştirme veya başka bileşenlerle aynı değeri paylaşma gibi durumlarda daha elverişlidir. Bunun karşılığında her değişiklik React state güncellemesi oluşturur ve input’un davranışını uygulama kodu yönetir.
Uncontrolled input nasıl çalışır?
Uncontrolled input’ta güncel değer React state’inde tutulmaz. Input kendi değerini DOM içinde saklar. Başlangıç değeri için
defaultValue, mevcut değeri okumak için useRef kullanılır.
Kod:
import { useRef } from "react";
export default function UncontrolledForm() {
const nameRef = useRef(null);
function handleSubmit(event) {
event.preventDefault();
alert(`Girilen ad: ${nameRef.current.value}`);
}
return (
<form onSubmit={handleSubmit}>
<label>
Adınız
<input ref={nameRef} defaultValue="" />
</label>
<button type="submit">Gönder</button>
</form>
);
}Bu örnekte kullanıcı yazarken React state güncellenmez. Gönder düğmesine basıldığında
nameRef.current.value input’un o andaki değerini verir. Ref henüz input’a bağlanmadan okunursa current değeri bulunmayabilir; bu nedenle okuma işlemini form olayında veya bileşen oluşturulduktan sonra yapın.İki kod bloğu alternatif, ayrı default-export bileşenleridir; aynı dosyaya iki default export olarak yapıştırmayın. Metin alanındaki value/defaultValue ayrımı, checkbox ve radio için checked/defaultChecked şeklindedir. Dosya seçme alanının değeri tarayıcı tarafından yönetilir; normal metin alanı gibi istediğiniz dosya yoluna controlled value atamayın.
Hangi yaklaşımı seçmelisiniz?
Kararı yalnız kod miktarına göre değil, değere ne zaman ve kim tarafından ihtiyaç duyulduğuna göre verin.
| İhtiyaç | Uygun yaklaşım | Gerekçe |
|---|---|---|
| Anlık doğrulama veya biçimlendirme | Controlled | Her değişiklik React’a ulaşır. |
| Birden fazla alanın birlikte yönetilmesi | Controlled | Değerler tek bir state yapısında toplanabilir. |
| Değeri yalnız gönderimde okuma | Uncontrolled | State ve her tuş vuruşu için handler gerekmez. |
| Harici veya yerel DOM davranışlı basit form | Uncontrolled | Form değeri DOM’dan gerektiğinde alınır. |
Controlled kullanacaksanız her alanın başlangıç state’ini belirleyin; örneğin metin alanı için
"" kullanın. Başlangıçta undefined, sonradan metin gibi tür değiştiren değerler vermek controlled ve uncontrolled davranışın karışmasına yol açabilir. Uncontrolled input’ta defaultValue yalnız başlangıç değeridir; sonradan değiştirmek için value gibi davranmasını beklemeyin.- Alan değerinin yazılırken başka bir arayüzü etkileyip etkilemeyeceğine karar verin.
- Etkileyecekse state,
valueveonChangeile controlled input kurun. - Yalnız form gönderiminde okuyacaksanız
defaultValueveuseRefile uncontrolled input kurun. - Aynı input’a hem
valuehemdefaultValuevererek iki yaklaşımı karıştırmayın. - Formu çalıştırıp yazma, temizleme ve gönderme davranışını test edin; beklenen değer alınmıyorsa önce input’un controlled mı uncontrolled mı olduğuna bakın.
Uncontrolled formu FormData ile okuyacaksanız alanlara name ekleyin; name olmadan form verisi içinde ilgili anahtar oluşmaz. Ref ile doğrudan value okuma ise name zorunluluğundan farklıdır. Her iki yaklaşımda da istemci değerleri sunucu tarafında yeniden doğrulanır.
