Tarayıcıya yerleşik <select> bileşeni, bir seçim kutusu render etmenizi sağlar.

<select>
  <option value="birSecenek">Bir seçenek</option>
  <option value="digerSecenek">Diğer seçenek</option>
</select>

Referans

<select>

Ekranda bir seçim kutusu göstermek için, tarayıcının yerleşik bileşeni olan <select>’i render edin.

<select>
  <option value="birSecenek">Bir seçenek</option>
  <option value="digerSecenek">Diğer seçenek</option>
</select>

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

Prop’lar

<select> tüm ortak eleman prop’larını destekler.

value prop’u ileterek seçim kutusunu kontrollü hale getirebilirsiniz:

  • value: String (ya da [multiple={true}] için string’lerden oluşan bir dizi (#enabling-multiple-selection)). Hangi seçeneğin seçildiğini kontrol eder. Her value string’i, <select> içindeki <option>’ların value değeri ile eşleşir.

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

Eğer <select> bileşeniniz kontrolsüz ise, onun yerine defaultValue prop’unu iletebilirsiniz:

Bu <select> prop’ları hem kontrollü hem de kontrolsüz seçim kutuları için geçerlidir:

  • autoComplete: String. Olası otomatik tamamlama davranışlarından birini belirtir.
  • autoFocus: Boolean. Eğer true ise, React, eleman DOM’a eklendikten sonra o elemana odaklanacaktır.
  • children: <select> elemanı <option>, <optgroup> ve <datalist> bileşenlerini alt eleman olarak kabul eder. Bu bileşenlerden birini render ettiği sürece kendi bileşenlerinizi de iletebilirsiniz. Sonucunda <option> elemanını render eden kendi bileşenlerinizi iletirseniz, render ettiğiniz her <option> bir value değerine sahip olmalıdır.
  • disabled: Boolean. Eğer true ise, seçim kutusu etkileşimli olmayacak ve soluk renkte görünecektir.
  • form: String. Seçim kutusunun ait olduğu <form>’un id’sini belirtir. Eğer belirtilmezse, ağaçtaki en yakın üst form’dur.
  • multiple: Boolean. Eğer true ise, tarayıcı çoklu seçime izin verir.
  • name: String. Form ile birlikte gönderilen seçim kutusunun adını belirtir.
  • onChange: Olay yöneticisi fonksiyonu. [Kontrollü seçim kutuları] (#controlling-a-select-box-with-a-state-variable) için gereklidir. Kullanıcı farklı bir seçenek seçer seçmez çalıştırılır. Tarayıcı input olayı gibi davranır.
  • onChangeCapture: onChange’in yakalama aşamasında çalıştırılan sürümüdür.
  • onInput: Olay yöneticisi fonksiyonu. Kullanıcı değeri değiştirir değiştirmez ç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 sürümüdür.
  • onInvalid: Olay yöneticisi fonksiyonu. Bir girdi, form gönderilirken doğrulamayı geçemezse çalıştırılır. Yerleşik invalid olayının aksine, React onInvalid olayı kabarcıklanır (bubbles).
  • onInvalidCapture: onInvalid’in yakalama aşamasında çalıştırılan sürümüdür.
  • required: Boolean. Eğer true ise, formun gönderilmesi için bir değer sağlanmalıdır.
  • size: Sayı. multiple={true} seçenekleri için, başlangıçta görüntülenmesi tercih edilen öğe sayısını belirtir.

Uyarılar

  • HTML’den farklı olarak, <option>’a selected özelliği iletmek desteklenmemektedir. Bunun yerine, kontrolsüz seçim kutuları için <select defaultValue>, kontrollü seçim kutuları için <select value> ifadelerini kullanın.
  • Eğer bir seçim kutusu value prop’u alıyorsa, kontrollü olarak ele alınacaktır.
  • Bir seçim kutusu aynı anda hem kontrollü hem de kontrolsüz olamaz.
  • Bir seçim kutusu yaşam döngüsü boyunca kontrollü ve ya kontrolsüz olma arasında geçiş yapamaz.
  • Kontrollü her seçim kutusu, değerini senkronize olarak güncelleyen bir onChange olay yöneticisine ihtiyaç duyar.

Kullanım

Seçenekler içeren bir seçim kutusu gösterme

Bir seçim kutusu görüntülemek için içinde <option> bileşenlerinin listesini içeren bir <select> render edin. Her <option>’a, form ile gönderilecek verileri temsil eden bir value değeri verin.

export default function FruitPicker() {
  return (
    <label>
      Bir meyve seçin:
      <select name="secilenMeyve">
        <option value="elma">Elma</option>
        <option value="muz">Muz</option>
        <option value="portakal">Portakal</option>
      </select>
    </label>
  );
}

Seçim kutusuna etiket verme

Genel olarak, her <select> elemanını bir <label> elemanı içine yerleştirirsiniz. Bu, tarayıcıya bu etiketin o seçim kutusuyla ilişkili olduğunu söyler. Kullanıcı etikete tıkladığında tarayıcı otomatik olarak seçim kutusuna odaklanacaktır. Bu durum erişilebilirlik için de önemlidir: kullanıcı seçim kutusuna odaklandığında ekran okuyucu bu etiketi okuyacaktır.

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

import { useId } from 'react';

export default function Form() {
  const vegetableSelectId = useId();
  return (
    <>
      <label>
        Bir meyve seçin:
        <select name="secilenMeyve">
          <option value="elma">Elma</option>
          <option value="muz">Muz</option>
          <option value="portakal">Portakal</option>
        </select>
      </label>
      <hr />
      <label htmlFor={vegetableSelectId}>
        Bir sebze seçin:
      </label>
      <select id={vegetableSelectId} name="secilenSebze">
        <option value="salatalik">Salatalık</option>
        <option value="misir">Mısır</option>
        <option value="domates">Domates</option>
      </select>
    </>
  );
}

Başlangıçta seçili bir seçenek sağlama

Varsayılan olarak, tarayıcı listedeki ilk <option>’ı seçecektir. Varsayılan olarak başka bir seçeneği seçmek için o <option>’ın value değerini defaultValue olarak <select> elemanına iletin.

export default function FruitPicker() {
  return (
    <label>
      Bir meyve seçin:
      <select name="secilenMeyve" defaultValue="portakal">
        <option value="elma">Elma</option>
        <option value="muz">Muz</option>
        <option value="portakal">Portakal</option>
      </select>
    </label>
  );
}

Tuzak

HTML’den farklı olarak, tek bir <option>’a selected özelliği iletmek desteklenmemektedir.

Çoklu seçime izin verme

Kullanıcının çok seçenek seçmesine izin vermek için multiple={true} ifadesini <select> elemanına iletin. Bu durumda, eğer başlangıçta seçili seçenekler için defaultValue belirtirseniz, bu bir dizi olmalıdır.

export default function FruitPicker() {
  return (
    <label>
      Bazı meyveleri seçin:
      <select
        name="secilenMeyve"
        defaultValue={['portakal', 'muz']}
        multiple={true}
      >
        <option value="elma">Elma</option>
        <option value="muz">Muz</option>
        <option value="portakal">Portakal</option>
      </select>
    </label>
  );
}

Form’u gönderirken seçim kutusunun değerini okuma

Seçim kutusu ve <button type="submit"> içeren bir <form> elemanı render edin. Bu buton <form onSubmit> olay yönetecinizi çağıracaktır. Varsayılan olarak, tarayıcı form verilerini bulunduğunuz URL’e gönderecek ve sayfayı yenileyecektir. Bu davranışı engellemek için e.preventDefault() ifadesini çağırabilirsiniz. Form verisini 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);
    // formData'yı fetch gövdesi olarak iletebilirsiniz:
    fetch('/some-api', { method: form.method, body: formData });
    // Tarayıcının varsayılan olarak yaptığı gibi, bir URL oluşturabilirsiniz:
    console.log(new URLSearchParams(formData).toString());
    // Düz bir nesne gibi çalışabilirsiniz.
    const formJson = Object.fromEntries(formData.entries());
    console.log(formJson); // (!) Bu, çoklu seçim değerlerini içermez
    // Ya da bir dizi ad-değer çifti alabilirsiniz.
    console.log([...formData.entries()]);
  }

  return (
    <form method="post" onSubmit={handleSubmit}>
      <label>
        Favori meyvenizi seçin:
        <select name="secilenMeyve" defaultValue="portakal">
          <option value="elma">Elma</option>
          <option value="muz">Muz</option>
          <option value="portakal">Portakal</option>
        </select>
      </label>
      <label>
        Tüm favori sebzelerinizi seçin:
        <select
          name="secilenSebzeler"
          multiple={true}
          defaultValue={['misir', 'domates']}
        >
          <option value="salatalik">Salatalık</option>
          <option value="misir">Mısır</option>
          <option value="domates">Domates</option>
        </select>
      </label>
      <hr />
      <button type="sifirla">Sıfırla</button>
      <button type="gonder">Gönder</button>
    </form>
  );
}

Not

<select> elemanınıza bir name değeri verin, örneğin <select name="selectedFruit" />. Verdiğiniz name değeri form verisinde anahtar olarak kullanılacaktır, örneğin { selectedFruit: "orange" }.

Eğer çoklu seçim için <select multiple={true}> ifadesini kullanırsanız, form’dan okuyacağınız FormData, seçilen her değeri ayrı bir ad-değer çifti olarak içerecektir. Yukarıdaki örnekteki konsola yakından bakın.

Tuzak

Varsayılan olarak, <form> elemanı içindeki herhangi bir <button> elemanı formu gönderecektir. Bu şaşırtıcı olabilir! Kendi özel Button React bileşeniniz varsa, <button> yerine <button type="button"> döndürmeyi düşünün. Daha açık olmak için, formu göndermesi gereken butonlar için <button type="submit"> ifadesini kullanın.

State değişkeni ile seçim kutusunu kontrol etme

<select /> gibi bir seçim kutusu kontrolsüzdür. <select defaultValue="orange" /> gibi başlangıçta seçili bir değer iletseniz bile, JSX’iniz şu anki değeri değil, yalnızca başlangıç değerini belirtir.

Kontrollü seçim kutusu render etmek için ona value prop’u iletin. React, seçim kutusunu her zaman ilettiğiniz value değerine sahip olmaya zorlar. Genellikle, bir state değişkeni kullanarak seçim kutusunu kontrol edeceksiniz:

function FruitPicker() {
  const [secilenMeyve, setSecilenMeyve] = useState('portakal'); // State değişkeni bildirin...
  // ...
  return (
    <select
      value={secilenMeyve} // ...seçilenin değerini state değişkeniyle eşleşmeye zorla...
      onChange={e => setSecilenMeyve(e.target.value)} // ... ve her bir değişimde state değişkenini güncelle!
    >
      <option value="elma">Elma</option>
      <option value="muz">Muz</option>
      <option value="portakal">Portakal</option>
    </select>
  );
}

Bu, her yapılan seçime tepki olarak kullanıcı arayüzünün bazı bölümlerini yeniden render etmek istediğiniz zaman kullanışlıdır.

import { useState } from 'react';

export default function FruitPicker() {
  const [secilenMeyve, setSecilenMeyve] = useState('portakal');
  const [secilenSebzeler, setSecilenSebzeler] = useState(['misir', 'domates']);
  return (
    <>
      <label>
        Bir meyve seç:
        <select
          value={secilenMeyve}
          onChange={e => setSecilenMeyve(e.target.value)}
        >
          <option value="elma">Elma</option>
          <option value="muz">Muz</option>
          <option value="portakal">Portakal</option>
        </select>
      </label>
      <hr />
      <label>
        Tüm favori sebzelerinizi seçin:
        <select
          multiple={true}
          value={secilenSebzeler}
          onChange={e => {
            const options = [...e.target.selectedOptions];
            const values = options.map(option => option.value);
            setSecilenSebzeler(values);
          }}
        >
          <option value="salatalik">Salatalık</option>
          <option value="misir">Mısır</option>
          <option value="domates">Domates</option>
        </select>
      </label>
      <hr />
      <p>Favori meyveniz: {secilenMeyve}</p>
      <p>Favori sebzeleriniz: {secilenSebzeler.join(', ')}</p>
    </>
  );
}

Tuzak

Eğer onChange fonksiyonu olmadan value değeri iletirseniz, bir seçenek seçmek imkansız olacaktır. Seçim kutusuna value değeri ileterek kontrol ettiğinizde, seçim kutusunu her zaman ilettiğiniz değere sahip olmaya zorlarsınız. Bu nedenle, bir state değişkenini value olarak iletirseniz ancak onChange olay yöneticisi sırasında bu state değişkenini eşzamanlı olarak güncellemeyi unutursanız, React, her tuşa tıkladığınızda seçim kutusunu belirttiğiniz value değerine geri döndürecektir.

HTML’den farklı olarak, tek bir <option>’a selected özelliği iletmek desteklenmemektedir.

Previous<progress>
Next<textarea>