onChangeText
- React Native kursu
- Başlangıç
- Ders 25/116
- 5 dk
onChangeText ile metin değişimini öğrenirsin.
onChangeText
Kullanıcı TextInput'a her yazdığında metin değişir ve React Native bu değişimi onChangeText prop'una bildirir. onChangeText bir işlev alır; işlevin ilk parametresi yeni metindir.
Örnek: <TextInput onChangeText={(text) => console.log(text)} />. Buradaki ok fonksiyonu her tuş vuruşunda çağrılır ve text parametresi güncel değeri taşır. Bu, React Native'te metin değişimini izlemenin standart yoludur.
İşleyici fonksiyonu
onChangeText'e genellikle bir ok fonksiyonu ya da bileşende tanımlı bir işleve referans verilir. Önce işlevi tanımla, sonra prop'a bağla: function handleText(text) { setText(text); } ve <TextInput onChangeText={handleText} />.
İşlevi çağırmak için parantez açma; bu, render sırasında bir kez çağırır ve sonucu bağlar. Doğru yazım referans vermek: onChangeText={handleText}. Parametre göndermek gerekiyorsa ok fonksiyonu sar: onChangeText={(t) => handleText(id, t)}.
Uygulama TextInput ve onChangeText
useState'i react'ten ve TextInput'u react-native'den içe aktar. App içinde text state'i oluştur (ilk değeri boş dize). <TextInput'un onChangeText prop'una setText'i bağla.
Başlangıç kodu
// useState ve TextInput'u içe aktar
// text state'i oluştur
function App() {
return null;
}Örnek çözüm
import { useState } from "react";
import { TextInput, View } from "react-native";
function App() {
const [text, setText] = useState("");
return (
<View>
<TextInput onChangeText={setText} value={text} />
</View>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 onChangeText prop'u
<TextInput ____={(text) => setText(text)} /><TextInput onChangeText={(text) => setText(text)} />Açıklama: onChangeText yeni metni işleve geçirir.
2 onChangeText işlevinin ilk parametresi nedir?
<TextInput onChangeText={(text) => {}} />- Olay nesnesi
- DOM öğesi
- Önceki metin
- Yeni metin Doğru cevap
Açıklama: İlk parametre kullanıcının yazdığı yeni metindir.
3 onChangeText parçalarını eşle
| Kavram | Anlamı |
|---|---|
onChangeText |
Metin değişince çağrılır |
text |
Yeni metin parametresi |
useState |
State oluşturur |
setText |
State'i günceller |