disabled
- React Native kursu
- Başlangıç
- Ders 46/116
- 5 dk
disabled prop ile buton devre dışı bırakmayı öğrenirsin.
disabled
Bazen bir düğmenin dokunulamaz olması gerekir; örneğin form geçersizken Gönder düğmesi inaktif kalmalıdır. disabled prop'u bunu sağlar: disabled={true} düğmeyi kapatır ve onPress çağrılmaz. Button, TouchableOpacity ve Pressable hepsi destekler.
Örnek: <Button title="Gönder" onPress={handleSend} disabled={!isValid} />. Burada isValid yanlışken düğme devre dışı kalır. Mantık genellikle form geçerliliğine, ağ isteğinin devam etmesine veya yetkiye bağlıdır. Devre dışı düğmeler genelde soluk görünür.
Koşullu devre dışı
Çoğu zaman disabled sabit true değil, bir koşula bağlıdır. Formun geçerliliği bir useState ile tutuluyorsa düğmeyi buna bağlarsın: disabled={!isValid}. Ağ isteği sürüyorsa disabled={loading} ile çift tıklamayı önlersin.
Bu kalıp çift gönderimi, geçersiz form gönderimini ve yetkisiz eylemleri engeller. disabled değeri bir JavaScript ifadesidir; doğru ya da yanlış dönen her şey olabilir. Önemli olan: düğmeyi kapatan koşul değiştiğinde bileşen yeniden render olur ve düğme otomatik açılır.
Uygulama Koşullu kapalı düğme yaz
Boş bileşeni tamamla. isValid adında bir useState tanımla (başlangıç false). handleSend işlevini tanımla. Dönüşte <Button title="Gönder" onPress={handleSend} disabled={!isValid} /> kullan.
Başlangıç kodu
import React from 'react';
import { Button } from 'react-native';
export default function SendButton() {
// isValid state'ini ve handleSend işlevini ekle; Button döndür
return null;
}Örnek çözüm
import React from 'react';
import { Button } from 'react-native';
export default function SendButton() {
const [isValid, setIsValid] = React.useState(false);
const handleSend = () => {};
return <Button title="Gönder" onPress={handleSend} disabled={!isValid} />;
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 disabled prop'unu yaz
<Button title="Gönder" onPress={handleSend} ____={true} /><Button title="Gönder" onPress={handleSend} disabled={true} />Açıklama: disabled={true} düğmeyi devre dışı bırakır.
2 Durumu davranışına eşle
| Kavram | Anlamı |
|---|---|
disabled={true} |
Düğme kapalı |
disabled={false} |
Düğme açık |
disabled={!isValid} |
Form geçersizken kapalı |
onPress |
Açıkken çağrılır |
3 disabled={true} olan bir düğmede ne olur?
<Button title="Gönder" onPress={send} disabled={true} />- onPress çağrılmaz Doğru cevap
- Düğme görünmez olur
- Düğme kırmızı olur
- Düğme yeniden boyutlanır
Açıklama: disabled düğmede onPress çağrılmaz.