Kontrollü input
- React kursu
- Başlangıç
- Ders 49/84
- 4 dk
Input değerini state'e bağlayarak kontrollü bileşen yazmayı öğrenirsin.
Kontrollü input
Bir input'u kontrollü yapmak, değerini state'e bağlamaktır. input'un value özniteliğine state'i, onChange'e de güncelleyiciyi verirsin.
Yazım: <input value={text} onChange={e => setText(e.target.value)} />. Böylece input her zaman state'i gösterir; her tuş state'i günceller.
Bu, React form yaklaşımının temelidir: tek doğru kaynak (single source of truth) state'tir.
onChange akışı
Her tuş basışında onChange tetiklenir, handler e.target.value alır ve setText ile state'i günceller. React yeniden çizer; input yeni değeri gösterir.
Bu döngü çok hızlıdır; kullanıcı akıcı yazım hisseder. React'in "tek yönlü veri akışı" budur.
Kontrollü input olmadan React input'un içeriğini bilmez; bu yüzden her zaman kontrollü kullanırız.
Uygulama Kontrollü input
Aşağıdaki iskeleti tamamla. NameInput bileşeni yaz; useState'i içe aktar. const [text, setText] = useState(""); tanımla. <input value={text} onChange={e => setText(e.target.value)} /> döndür. Dışa aktar.
Başlangıç kodu
import { useState } from "react";
// NameInput bileşenini buraya tanımlaÖrnek çözüm
import { useState } from "react";
function NameInput() {
const [text, setText] = useState("");
return <input value={text} onChange={e => setText(e.target.value)} />;
}
export default NameInput;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Kontrollü input'un değeri nereden gelir?
State is the single source of truth.- tarayıcı belleğinden
- DOM'dan
- state'ten Doğru cevap
- props'tan değil
Açıklama: value={text} ile state kaynak olur.
2 Kontrollü input: eksik parçayı tamamla
<input value={text} onChange={e => setText(e.____)} /><input value={text} onChange={e => setText(e.target.value)} />Açıklama: e.target.value güncel metni verir.
3 Kontrollü input: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
value |
State kaynağı |
onChange |
Değişim olayı |
e.target.value |
Güncel metin |
setText |
Güncelleyici |