Özet - TextInput

onChangeText, controlled ve placeholder'ı birleştirerek bir form alanı yazarsın.

Özet - TextInput

Bu grupta TextInput'un temellerini öğrendik: içe aktarma, onChangeText, controlled input, placeholder ve secureTextEntry. Şimdi tüm bunları bir araya getiren bir giriş formu yazacağız.

Hedef: e-posta ve şifre alanlarını yan yana kurmak. E-posta alanında placeholder ile ipucu, şifre alanında secureTextEntry ile maskeleme olacak. Her ikisi de controlled olacak; value ve onChangeText ayrı state'lere bağlanacak. Önce bu formu, ardından da iki alanlı bir kayıt formu yazacaksın.

Uygulama Giriş formu

useState'i react'ten ve TextInput'u react-native'den içe aktar. email ve password state'leri oluştur (ilk değerleri boş dize). İki <TextInput> ekle: ilki placeholder="E-posta" ile controlled; ikincisi placeholder="Şifre" ile controlled ve secureTextEntry içeren.

Örnek çözümü göster

import { useState } from "react";
import { TextInput, View } from "react-native";

function App() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  return (
    <View>
      <TextInput placeholder="E-posta" value={email} onChangeText={setEmail} />
      <TextInput placeholder="Şifre" value={password} onChangeText={setPassword} secureTextEntry />
    </View>
  );
}

Uygulama Kayıt formu

useState'i react'ten ve TextInput'u react-native'den içe aktar. name ve phone state'leri oluştur (ilk değerleri boş dize). İki controlled <TextInput> ekle: birine placeholder="Ad Soyad", diğerine placeholder="Telefon" ver.

Örnek çözümü göster

import { useState } from "react";
import { TextInput, View } from "react-native";

function App() {
  const [name, setName] = useState("");
  const [phone, setPhone] = useState("");
  return (
    <View>
      <TextInput placeholder="Ad Soyad" value={name} onChangeText={setName} />
      <TextInput placeholder="Telefon" value={phone} onChangeText={setPhone} />
    </View>
  );
}

Kendini test et

Özet parçalarını eşle

TextInput

Metin girişi
onChangeText

Değişim işlevi
value

Controlled değer
placeholder

Boşken ipucu
secureTextEntry

Şifre gizleme
Controlled input için hangi ikili gerekir?
```
<TextInput ? ? />
```
- style ve onPress
- title ve onPress
- placeholder ve color
- value ve onChangeText
Cevabı göster

value ve onChangeText — value ve onChangeText controlled deseni oluşturur.

Sıradaki ders: style prop

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler