TextInput
- React Native kursu
- Başlangıç
- Ders 24/116
- 4 dk
TextInput ile kullanıcı girdisi almayı öğrenirsin.
TextInput
React Native'in TextInput bileşeni kullanıcıdan metin alır. Text yalnızca metin gösterirken TextInput düzenlemeye izin verir; dokunulduğunda ekran klavyesi otomatik açılır.
Temel prop'ları şunlardır: value güncel metni, onChangeText metin değişince çağrılacak işlevi, placeholder ise boşken görünen ipucu metnini alır. react-native paketinden içe aktarılır: import { TextInput } from "react-native";. Bu derste önce en temel kullanımı göreceğiz.
Temel prop'lar
TextInput'un üç temel prop'u vardır. value bileşenin gösterdiği güncel metindir. onChangeText kullanıcı her tuşa bastığında çağrılır ve yeni metni ilk parametresi olarak alır. placeholder ise alan boşken görünen soluk ipucudur.
Bu üç prop birlikte ileride göreceğimiz "controlled input" desenini oluşturur. Şimdilik yalnızca TextInput'u ekrana getirmeyi ve içe aktarmayı çalışalım. Aşağıdaki alıştırmada View kabuğu içine tek bir TextInput yerleştireceksin.
Uygulama TextInput'u ekrana getir
TextInput'u react-native'den içe aktar. App bileşeni <View> çocuğu olarak bir <TextInput /> döndürsün.
Başlangıç kodu
// TextInput'u react-native'den içe aktar
// App içine bir TextInput öğesi ekle
function App() {
return null;
}Örnek çözüm
import { TextInput, View } from "react-native";
function App() {
return (
<View>
<TextInput />
</View>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 TextInput hangi paketten gelir?
import { TextInput } from "?";- react
- expo-av
- react-native Doğru cevap
- @react-navigation/native
Açıklama: TextInput react-native paketinden içe aktarılır.
2 İçe aktarma satırı
import { ____ } from "react-native";import { TextInput } from "react-native";Açıklama: TextInput bileşeni react-native'den gelir.
3 TextInput parçalarını eşle
| Kavram | Anlamı |
|---|---|
TextInput |
Metin girişi |
Text |
Metin gösterme |
value |
Güncel metin |
placeholder |
Boşken ipucu |