React ile Dropdown Select Yapalım

React-select kütüphanesini kullanarak çoklu seçim, otomatik tamamlama ve ajax desteği ile ReactJS için esnek ve güzel bir Select Input kontrolü yapalım.

Aşağıdaki özelliklere sahiptir.

  • Kişiselleştirilebilir fonksiyonlarla veriye esnek yaklaşım.
  • Genişletilebilir şekillendirme API’si.
  • Kullanıcı Arayüzü davranışı üzerinde tam kontrol için Bileşen Enjeksiyon API’sı.
  • Kontrol edilebilir durum aksesuarı ve modüler mimari.
  • Seçenek grupları, portal desteği, animasyon ve daha fazlası gibi uzun süren özellikler.

React Dropdown Select

İlk olarak, React.js’yi kurduktan sonra react-select kütüphanesini kurduk.

React ve Diğer Kütüphanelerin Kurulumu

Aşağıdaki komut kodunu yazınız.

npx create-react-app reaselect

Şimdi proje klasörünün içine girelim.

cd reaselect

React-Select v2’yi yüklemek için, aşağıdaki komutu kullanarak react-select paketini ekleyin.

yarn add react-select

# or

npm install react-select --save

Ayrıca, Bootstrap 4’ü aşağıdaki komutu kullanarak yükleyebiliriz.

yarn add bootstrap

# or

npm install bootstrap --save

react-select Modülünü Import Edelim

Src >> App.js dosyasında, aşağıdaki kodu ekleyin.

import React, {Component} from 'react';
import Select from 'react-select';
import 'bootstrap/dist/css/bootstrap.min.css';

const techCompanies = [
    {label: "Apple", value: 1},
    {label: "Facebook", value: 2},
    {label: "Netflix", value: 3},
    {label: "Tesla", value: 4},
    {label: "Amazon", value: 5},
    {label: "Alphabet", value: 6},
];

class App extends Component {
    render() {
        return (
            <div className="container">
                <div className="row">
                    <div className="col-md-4">.</div>
                    <div className="col-md-4">
                        <Select options={techCompanies}/>
                    </div>
                    <div className="col-md-4">.</div>
                </div>
            </div>
        );
    }
}

export default App;
npm start

Burada, bootstrap 4‘ü ve react-select kütüphanesini içerik aktardık. Ardından, açılır menüde görüntülenecek verileri içeren bir array oluşturduk.

Select elementimiz için bir çok özelliğimiz mevcut bunlar ;

  • autofocus – tarayıcı açıldığında fokuslanmasını sağlar.
  • className – kontrole bir className uygular.
  • classNamePrefix – classNames’i belirtilen önek ile iç elemanlara uygular.
  • isDisabled – kontrolü devre dışı bırak.
  • isMulti – kullanıcının birden çok değer seçmesine izin ver.
  • isSearchable – kullanıcının eşleşen seçenekleri aramasına izin ver.
  • name – mevcut değeri içeren bu ada sahip bir HTML girişi oluşturun.
  • onChange – selectte herhangi bir değişiklikten haberdar olmak için.
  • options – seçilebilir seçenekleri belirtin.
  • placeholder – seçenek seçilmediğinde görüntülenecek olan metin.
  • value – mevcut değeri kontrol eder.

Diğer Özellikler

Aşağıdaki özelliği kullanarak çoklu seçimleri kullanabiliriz. Bu özelliği eklememiz gerekiyor.

<Select options={ techCompanies } 
          isMulti />

Kontrol Edilebilir Özellikler

Tepkileri kontrol etmeniz için;

  • value / onChange – kontrolün mevcut değerini belirtin.
  • menuIsOpen / onMenuOpen / onMenuClose – menünün açık olup olmadığını kontrol edin.
  • inputValue / onInputChange – arama girişinin değerini kontrol etmek (bunu değiştirmek mevcut seçenekleri güncelleyecektir).

Bu tanıtımı sağlamadıysanız, denetledikleri durumun başlangıç değerini ayarlayabilirsiniz.

  • defaultValue – kontrolün başlangıç değerini ayarlayın.
  • defaultMenuIsOpen – menünün başlangıç açık değerini ayarlayın.
  • defaultInputValue – arama girişinin başlangıç değerini ayarlayın.

Metotlar

React-select iki genel yöntem sunar:

  • focus() – kontrol programlı olarak odaklanır.
  • blur() – denetimi programatik olarak bulanıklaştırır.

Bir Cevap Yazın