Kontrollü input

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.

Örnek çözümü göster

import { useState } from "react";

function NameInput() {
  const [text, setText] = useState("");
  return <input value={text} onChange={e => setText(e.target.value)} />;
}

export default NameInput;

Kendini test et

Kontrollü input'un değeri nereden gelir?
```
State is the single source of truth.
```
- tarayıcı belleğinden
- DOM'dan
- state'ten
- props'tan değil
Cevabı göster

state'ten — value={text} ile state kaynak olur.

Kontrollü input: eksik parçayı tamamla

<input value={text} onChange={e => setText(e.____)} />

Cevabı göster

<input value={text} onChange={e => setText(e.target.value)} />

Kontrollü input: kavramları eşleştir

value

State kaynağı
onChange

Değişim olayı
e.target.value

Güncel metin
setText

Güncelleyici

Sıradaki ders: Form gönderimi

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler