react select

React-Select

Kontrol Pilih untuk Bereaksi. Awalnya dibangun untuk digunakan di KeystoneJS.

Lihat react-select.com untuk demo langsung dan dokumen yang komprehensif.

react-select didanai oleh Thinkmill dan Atlassian. Kami adalah proyek open source yang terus didukung oleh masyarakat.

React Select membantu Anda mengembangkan komponen pilih yang kuat yang hanya bekerja di luar kotak, tanpa menghentikan Anda dari menyesuaikan bagian -bagian yang penting bagi Anda.

Untuk cerita di balik komponen ini, tonton Jed's Talk at React Conf 2019 - Building React Select

Fitur meliputi:

• Pendekatan fleksibel untuk data, dengan fungsi yang dapat disesuaikan
• API gaya yang dapat diperluas dengan emosi
• API injeksi komponen untuk kontrol penuh atas perilaku UI
• Alat peraga negara bagian dan arsitektur modular yang dapat dikendalikan
• Fitur yang telah lama diminta seperti grup opsi, dukungan portal, animasi, dan banyak lagi

Menggunakan versi yang lebih lama?

• Panduan Peningkatan V3, V4, dan V5
• Panduan Upgrade V2
• React Select V1 Dokumentasi dan Contoh tersedia di v1.react-select.com

Instalasi dan penggunaan

Cara termudah untuk menggunakan React-Select adalah dengan menginstalnya dari NPM dan membangunnya ke dalam aplikasi Anda dengan Webpack.

 yarn add react-select

Kemudian gunakan di aplikasi Anda:

 import React , { useState } from 'react' ;
import Select from 'react-select' ;

const options = [
  { value : 'chocolate' , label : 'Chocolate' } ,
  { value : 'strawberry' , label : 'Strawberry' } ,
  { value : 'vanilla' , label : 'Vanilla' } ,
] ;

export default function App ( ) {
  const [ selectedOption , setSelectedOption ] = useState ( null ) ;

  return (
    < div className = "App" >
      < Select
        defaultValue = { selectedOption }
        onChange = { setSelectedOption }
        options = { options }
      / >
    < / div >
  ) ;
} 

Alat peraga

Alat peraga umum yang mungkin ingin Anda tentukan termasuk:

• autoFocus - Fokuskan kontrol saat dipasang
• className - Terapkan nama class ke kontrol
• classNamePrefix - Terapkan nama kelas untuk elemen dalam dengan awalan yang diberikan
• isDisabled - Nonaktifkan kontrol
• isMulti - Izinkan pengguna untuk memilih beberapa nilai
• isSearchable - Izinkan pengguna untuk mencari opsi pencocokan
• name - Hasilkan input HTML dengan nama ini, berisi nilai saat ini
• onChange - Berlangganan Acara Ubah
• options - Tentukan opsi yang dapat dipilih pengguna
• placeholder - Ubah teks yang ditampilkan saat tidak ada opsi yang dipilih
• noOptionsMessage - ({InputValue: String}) => String | null - teks yang akan ditampilkan saat tidak ada opsi
• value - Kontrol Nilai Saat Ini

Lihat dokumentasi alat peraga untuk dokumentasi lengkap tentang dukungan yang dipilih oleh alat peraga.

Alat peraga yang dapat dikendalikan

Anda dapat mengontrol alat peraga berikut dengan memberikan nilai untuk mereka. Jika tidak, React-Select akan mengelolanya untuk Anda.

• value / onChange - Tentukan nilai saat ini dari kontrol
• menuIsOpen / onMenuOpen / onMenuClose - Kontrol apakah menu terbuka
• inputValue / onInputChange - Kontrol nilai input pencarian (mengubah ini akan memperbarui opsi yang tersedia)

Jika Anda tidak memberikan alat peraga ini, Anda dapat menetapkan nilai awal negara yang mereka kendalikan:

• defaultValue - Tetapkan nilai awal kontrol
• defaultMenuIsOpen - Atur nilai terbuka awal menu
• defaultInputValue - Tetapkan nilai awal dari input pencarian

Metode

React-Select memaparkan dua metode publik:

• focus() - Fokuskan kontrol secara terprogram
• blur() - Kabur Kontrol secara terprogram

Kustomisasi

Periksa dokumen untuk informasi lebih lanjut tentang:

• Menyesuaikan gaya
• Menggunakan komponen khusus
• Menggunakan komponen animasi bawaan
• Membuat Pilih Async
• Memungkinkan pengguna untuk membuat opsi baru
• Kasus penggunaan lanjutan
• Panduan TypeScript

Naskah

Rilis V5 mewakili penulisan ulang dari JavaScript ke TypeScript. Jenis untuk V4 dan rilis sebelumnya tersedia di @Types. Lihat panduan TypeScript untuk cara menggunakan tipe yang dimulai dengan V5.

Terima kasih

Terima kasih kepada semua orang yang telah berkontribusi pada proyek ini. Ini perjalanan yang liar.

Jika Anda suka React Select, Anda harus mengikuti saya di Twitter!

Berteriaklah kepada Joss Mackison, Charles Lee, Ben Conolly, Tom Walker, Nathan Bierema, Eric Bonow, Emma Hamilton, Dave Brotherstone, Brian Vaughn, dan Tim Sistem Desain Atlassian yang bersama dengan banyak kontributor lainnya telah membuat ini menjadi ❤ogry yang mungkin ini ❤ograp

Lisensi

MIT berlisensi. Hak Cipta (C) Jed Watson 2022.