disabled

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.

Örnek çözümü göster

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} />;
}

Kendini test et

disabled prop'unu yaz

<Button title="Gönder" onPress={handleSend} ____={true} />

Cevabı göster

<Button title="Gönder" onPress={handleSend} disabled={true} />

Durumu davranışına eşle

disabled={true}

Düğme kapalı
disabled={false}

Düğme açık
disabled={!isValid}

Form geçersizken kapalı
onPress

Açıkken çağrılır
disabled={true} olan bir düğmede ne olur?
```
<Button title="Gönder" onPress={send} disabled={true} />
```
- onPress çağrılmaz
- Düğme görünmez olur
- Düğme kırmızı olur
- Düğme yeniden boyutlanır
Cevabı göster

onPress çağrılmaz — disabled düğmede onPress çağrılmaz.

Sıradaki ders: Özet - Butonlar

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler