Tarayıcıya yerleşik <textarea> bileşeni çok satırlı metin kutusu render etmenizi sağlar.

<textarea />

Referans

<textarea>

Ekranda bir metin alanı göstermek için, tarayıcıya yerleşik <textarea> bileşenini render edin.

<textarea name="gonderiIcerigi" />

Daha fazla örnek için aşağıya bakınız.

Prop’lar

<textarea> tüm ortak eleman proplarını destekler.

value propu ileterek metin alanını kontrollü hale getirebilirsiniz :

  • value: String. Metin alanı içindeki metni kontrol eder.

value değeri ilettiğinizde, iletilen değeri güncelleyen onChange olay yöneticisini de iletmeniz gerekmektedir.

Eğer <textarea> bileşeniniz kontrolsüz ise, onun yerine defaultValue propunu iletebilirsiniz:

Bu <textarea> propları hem kontrollü hem de kotrolsüz metin alanları için geçerlidir:

  • autoComplete: 'on' ya da 'off'. Otomatik tamamlama davranışlarını belirtir.
  • autoFocus: Boolean. Eğer true ise, React, eleman DOM’a eklendikten sonra o elamana odaklanacaktır.
  • children: <textarea> alt bileşen kabul etmez. Başlangıç değeri ayarlamak için defaultValue kullanınız.
  • cols: Sayı. Ortalama karakter genişliklerinde,varsayılan genişliği belirler. Varsayılan değeri 20dir.
  • disabled: Boolean. Eğer true ise, metin alanı etkileşimli olmayacak ve soluk renkli görünecektir.
  • form: String. Metin kutusunun ait olduğu <form> bileşeninin id’sini belirtir. Eğer belirtilmezse, ağaçtaki en yakın üst formdur.
  • maxLength: Sayı. Metnin maksimum uzunluğunu belirtir.
  • minLength: Sayı. Metnin minimum uzunluğunu belirtir.
  • name: String. Form ile birlikte gönderilen metin kutusunun adını belirtir.
  • onChange: olay yöneticisi fonksiyonu. Kontrollü metin alanları için gereklidir. Kullanıcı tarafından, girdi değeri değiştiği anda çalışır (örneğin, klavyede tuşa her basıldığında çalışır). Tarayıcı input olayı](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event) gibi çalışır.
  • onChangeCapture: Yakalama aşamasında çalışan onChange’in bir versiyonudur.
  • onInput: Olay yöneticisi fonksiyonu. Değer, kullanıcı tarafından değiştirildiği anda çalıştırılır. Tarihsel nedenlerden dolayı, React’te benzer şekilde çalışan onChange’i kullanmak yaygındır.
  • onInputCapture: onInput’un yakalama aşamasında çalıştırılan versiyonudur.
  • onInvalid: Olay yöneticisi fonksiyonu. Bir girdi, form gönderiminde doğrulamayı geçemezse çalıştırılır. Yerleşik invalid olayının aksine, React onInvalid olayı kabarcık şeklinde yayılır (bubbles).
  • onInvalidCapture: onInvalid’in yakalama aşamasında çalıştırılan bir versiyionudur.
  • onSelect: Olay yöneticisi fonksiyonu. <textarea> içindeki seçilen alanın değişmesiyle tetiklenir. React, onSelect olayını boş seçim ve düzenlemelerde de (seçimi etkileyebilir) çalıştırır.
  • onSelectCapture: onSelect’in yakalama aşamasında çalıştırılan bir versiyonudur.
  • placeholder: String. Metin alanı boşken ekranda soluk renkte görüntülenir.
  • readOnly: Boolean. Eğer true ise, metin alanı kullanıcı tarafından düzenlenemez.
  • required: Boolean. Eğer true ise, formun gönderilebilmesi için değer sağlanmalıdır.
  • rows: Sayı. Ortalama karakter yüksekliklerinde, varsayılan yüksekliği belirler. Varsayılan değeri 2dir.
  • wrap: 'hard', 'soft', ya da 'off' değerlerini alabilir. Form gönderiliken metnin nasıl sarmalanacağını belirler.

Uyarılar

  • <textarea>something</textarea> şeklinde alt bileşen gönderimine izin verilmez. Başlangıç içeriği için defaultValue kullanınız.
  • Bir metin alanı value propuna string değer alırsa, kontrollü olarak ele alınır. .
  • Bir metin alanı aynı anda hem kontrollü hem de kontrolsüz olamaz.
  • Bir metin alanı yaşam döngüsü boyunca kontrollü ve kontrolsüz olma arasında geçiş yapamaz.
  • Kontrollü tüm metin alanları, değerini senkronize olarak güncelleyecen onChange olay yöneticisine ihtiyaç duyar.

Kullanım

Metin alanını gösterme

Ekranda <textarea>’yı görüntülemek için render ediniz. Varsayılan değerlerini rows and cols niteliklerini kullanarak belirleyebilirsiniz ancak varsayılan olarak kullanıcı yeniden boyutlandırabilir. Yeniden boyutlandırmayı devre dışı bırakmak için, CSS’te resize: none şeklinde belirtebilirsiniz.

export default function NewPost() {
  return (
    <label>
      Gönderinizi yazın:
      <textarea name="gonderiIcerigi" rows={4} cols={40} />
    </label>
  );
}

Metin alanı için etiket verme

Genel olarak, her <textarea> elemanını bir <label>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label) elemanı içine yerleştirirsiniz. Bu, tarayıcıya bu etiketin o metin alanıyla ilişkili olduğunu söyler. Kullanıcı bu etikete tıkladığında, tarayıcı o metin alanına odaklanır. Bu durum ayrıca erişebilirlik için de önemlidir: kullanıcı metin alanına tıkladığında ekran okuyucu bu etiketi okuyacaktır.

Eğer <textarea> bir <label> elemanının içine yerleştiremezseniz, <textarea id> ve <label htmlFor> elemanlarına aynı ID’yi ileterek bu elemanları ilişkilendirebilirsiniz. Bir bileşenin birden fazla örnekleri arasındaki çakışmaları önlemek için useId ile ID üretebilirsiniz.

import { useId } from 'react';

export default function Form() {
  const postTextAreaId = useId();
  return (
    <>
      <label htmlFor={postTextAreaId}>
        Gönderinizi yazın:
      </label>
      <textarea
        id={postTextAreaId}
        name="gonderiIcerigi"
        rows={4}
        cols={40}
      />
    </>
  );
}

Metin alanına başlangıç değeri verme

defaultValue değerini string olarak ileterek metin alanına başlangıç değeri verebilirsiniz.

export default function EditPost() {
  return (
    <label>
      Gönderinizi düzenleyin:
      <textarea
        name="gonderiIcerigi"
        defaultValue="Dün bisiklet sürmekten gerçekten keyif verdi!"
        rows={4}
        cols={40}
      />
    </label>
  );
}

Tuzak

HTML’in aksine, <textarea>Bazı içerikler</textarea> şeklinde yerleşik metin gönderimi desteklenmemektedir.

Formu gönderirken metin alanı değerini okuma

<button type="submit"> ve metin alanınızı çevreleyen bir <form> ekleyin. Eklediğiniz buton <form onSubmit> olay yöneticisini çağıracaktır. Varsayılan olarak, tarayıcı form verilerini bulunduğunuz URL’e gönderecek ve sayfayı yenileyecektir. e.preventDefault() ifadesini çağırarak bu işlemi engelleyebilirsiniz. Form verilerini new FormData(e.target) ile okuyabilirsiniz.

export default function EditPost() {
  function handleSubmit(e) {
    // Tarayıcının sayfayı yenilemesini engelleyin
    e.preventDefault();

    // Form verisini okuyun
    const form = e.target;
    const formData = new FormData(form);

    // formDatayı fetch gövdesi olarak iletebilirsiniz:
    fetch('/some-api', { method: form.method, body: formData });

    // formDatayı Düz nesne gibi de kullanabilirsiniz 
    const formJson = Object.fromEntries(formData.entries());
    console.log(formJson);
  }

  return (
    <form method="post" onSubmit={handleSubmit}>
      <label>
        Gönderi başlığı: <input name="gonderiBasligi" defaultValue="Bisiklet Sürmek" />
      </label>
      <label>
        Gönderinizi düzenleyin:
        <textarea
          name="gonderiIcerigi"
          defaultValue="Dün bisiklet sürmekten gerçekten keyif verdi!"
          rows={4}
          cols={40}
        />
      </label>
      <hr />
      <button type="reset">Düzenlemeleri sıfırla</button>
      <button type="submit">Gönderiyi kaydet</button>
    </form>
  );
}

Not

<textarea> elemanınıza bir name değeri verin, örneğin <textarea name="gonderiIcerigi" />. Bu name değeri form verilerinde anahtar olarak kullanılacaktır, örneğin { postContent: "Gönderiniz" }.

Tuzak

Varsayılan olarak <form> içindeki herhangi bir <button> elemanı formu gönderecektir. Bu biraz şaşırtıcı olabilir, kendinize ait React Button elemanınız varsa, <button> yerine <button type="button"> döndürmeyi düşünebilirsiniz. Daha açık olmak gerekirse, formu göndermesi gereken butonlar için <button type="submit"> kullanınız.

Durum değişkeniyle metin alanını kontrol etme

<textarea /> şeklindeki metin alanları kontrolsüzdür. <textarea defaultValue="Başlangıç metni" /> gibi başlangıç değeri iletseniz bile, JSX’iniz şu anki değeri değil, yalnızca başlangıç değerini belirtir.

Kontrollü metin alanını render etmek için, metin alanına value propunu iletin. React, her zaman metin alanı değerinin sizin ilettiğiniz value değeri olması için zorlayacaktır. Genelde, durum değişkeni: tanımlayarak metin alanınızı kontrol edeceksiniz.

function NewPost() {
  const [postContent, setPostContent] = useState(''); // Durum değişkeni tanımlayınız...
  // ...
  return (
    <textarea
      value={postContent} //.. girdinin değerinin durum değişkeniyle eşleşmesi için zorlayınız...
      onChange={e => setPostContent(e.target.value)} //...ve her düzenlemede durum değişkenini güncelleyiniz!
    />
  );
}

Bu işlem, eğer klavyedeki her girişte arayüzün bazı parçalarını yeniden render edecekseniz kullanışlıdır.

{
  "dependencies": {
    "react": "latest",
    "react-dom": "latest",
    "react-scripts": "latest",
    "remarkable": "2.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {}
}

Tuzak

Eğer onChange olay yöneticisi olmadan value değeri iletirseniz, metin alanına yazmak imkansız olacaktır. Metin alanını value değeri ileterek kontrol ettiğinizde, metin alanını sürekli olarak o değeri kullanmaya zorlarsınız. Bu nedenle bir durum değişkeni olarak value değeri ilettiğiniz sırada onChange olay yöneticisiyle de senkron olarak bu durum değişkenini güncellemeyi unutursanız, React klavyeye her basıldığında değişiklikleri geri alıp belirttiğiniz value değerine dönecektir.

Sorun giderme

Metin alanına yazarken güncellenmiyor

Metin alanınızı value değeri ile render ederken onChange olay yöneticisi yoksa konsolde şu hatayı göreceksiniz:

// 🔴 Hata: kontrol edilen metin alanının onChange olay yöneticisi yok
<textarea value={something} />
Console
onChange yöneticisi olmayan bir form alanına value propu verdiniz. Bu, salt okunur bir alan oluşturacaktır. Alanın değişken olması gerekiyorsa defaultValue kullanın. Aksi takdirde, onChange veya readOnly olarak ayarlayın.

Hata mesajında önerildiği üzere, sadece başlangıç değeri belirlemek istiyorsanız defaultValue kullanın:

// ✅ İyi: başlangıç değeri olan kontrolsüz metin alanı
<textarea defaultValue={something} />

Metin alanını durum değişkeni ile kontrol etmek için onChange yöneticisi belirleyin:

// ✅ İyi: onChange yöneticisi olan kontrollü metin alanı
<textarea value={something} onChange={e => setSomething(e.target.value)} />

Değer bilerek salt okunur ayarlanmak isteniyorsa, hatayı readOnly propu ekleyerek önleyebilirsiniz:

// ✅ İyi: salt okunur kontrollü metin alanı
<textarea value={something} readOnly={true} />

Metin alanındaki imlecim klavyeden her girişte en başa atlıyor

Bir metin alanını kontrol ediyorsanız, onChange sırasında DOM’daki metin alanı değerini durum değişkenine göre güncellemelisiniz.

e.target.value dışında başka bir değerle güncelleyemezsiniz:

function handleChange(e) {
  // 🔴 Hata: bir girişi e.target.value dışında bir şeyle güncelleme
  setFirstName(e.target.value.toUpperCase());
}

Ayrıca asenkron olarak da güncelleyemezsiniz:

function handleChange(e) {
  // 🔴 Hata: bir girişi asenkron güncelleme
  setTimeout(() => {
    setFirstName(e.target.value);
  }, 100);
}

Kodunuzu düzeltmek için, senkron bir şekilde e.target.value değeriyle güncelleyiniz:

function handleChange(e) {
  // ✅ Kontrollü girişi e.target.value değeriyle senkron güncelleme
  setFirstName(e.target.value);
}

Eğer bunlar sorununuzu çözmezse, metin alanınız her klavye girişinde DOM’dan silinip geri ekleniyor olabilir. Bu durum, her yeniden renderda durumu sıfırlama’dan kaynaklı olabilir. Örneğin, metin alanı ya da onun üstündeki elemanlar sürekli farklı key niteliği alıyor olabilir veya bileşen tanımlarını iç içe yerleştirmenizden kaynaklı olabilir. (React’ta iç içe yerleştirmelere izin verilmez ve “içteki” bileşen her renderda yeniden bağlanır.)

”Bir bileşen kontrolsüz girişi kontrol ediyor” hatası alıyorum

Bileşeninize value değeri verdiyseniz, yaşam döngüsü boyunca string olarak kalmalıdır.

Önce value={undefined} olarak değer iletip daha sonra value="some string" şeklinde değer iletemezsiniz çünkü React, kontrollü bileşen mi kontrolsüz bileşen mi bunu bilemez. Kontrollü bileşen her zaman value değeri olarak string almalıdır, null ya da undefined almamalıdır.

value değeriniz API’den veya durum değişkeninden geliyorsa, başta null veya undefined olarak tanımlanmış olabilir. Bu durumda boş bir string olarak ('') tanımlayabilirsiniz veya value={someValue ?? ''} olarak iletip value değerinin string olup olmadığına emin olabilirsiniz.

Previous<select>
NextAPIs

How do you like these docs?