ตัวเลือกการเลือกสำหรับ React เริ่มแรกสร้างขึ้นเพื่อใช้ใน keystonejs
ดู React-select.com สำหรับการสาธิตสดและเอกสารที่ครอบคลุม
react-select ได้รับทุนจาก ThinkMill และ Atlassian เราเป็นโครงการโอเพ่นซอร์สที่ได้รับการสนับสนุนอย่างต่อเนื่องโดยชุมชน
React Select ช่วยให้คุณพัฒนาส่วนประกอบที่มีประสิทธิภาพซึ่ง เพิ่งทำงาน นอกกรอบโดยไม่หยุดคุณจากการปรับแต่งชิ้นส่วนที่สำคัญสำหรับคุณ
สำหรับเรื่องราวที่อยู่เบื้องหลังองค์ประกอบนี้ดู Jed's Talk at React Conf 2019 - Building React Select
คุณสมบัติรวมถึง:
วิธีที่ง่ายที่สุดในการใช้ React-Select คือการติดตั้งจาก NPM และสร้างลงในแอพของคุณด้วย WebPack
yarn add react-select
จากนั้นใช้ในแอพของคุณ:
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 >
) ;
} อุปกรณ์ประกอบฉากทั่วไปที่คุณอาจต้องการระบุรวมถึง:
autoFocus - โฟกัสควบคุมเมื่อติดตั้งclassName - ใช้ชื่อคลาสกับตัวควบคุมclassNamePrefix - ใช้ชื่อ classnames กับองค์ประกอบภายในด้วยคำนำหน้าที่กำหนดisDisabled - ปิดการควบคุมisMulti - อนุญาตให้ผู้ใช้เลือกหลายค่าisSearchable - อนุญาตให้ผู้ใช้ค้นหาตัวเลือกการจับคู่name - สร้างอินพุต HTML ด้วยชื่อนี้ซึ่งมีค่าปัจจุบันonChange - สมัครสมาชิกเพื่อเปลี่ยนเหตุการณ์options - ระบุตัวเลือกที่ผู้ใช้สามารถเลือกได้placeholder - เปลี่ยนข้อความที่แสดงเมื่อไม่มีตัวเลือกถูกเลือกnoOptionsMessage - ({inputValue: String}) => String | NULL - ข้อความที่จะแสดงเมื่อไม่มีตัวเลือกvalue - ควบคุมค่าปัจจุบันดูเอกสารประกอบอุปกรณ์ประกอบฉากสำหรับเอกสารประกอบที่สมบูรณ์เกี่ยวกับอุปกรณ์ประกอบฉากรองรับการเลือกแบบเลือก
คุณสามารถควบคุมอุปกรณ์ประกอบฉากต่อไปนี้โดยให้ค่าแก่พวกเขา ถ้าคุณไม่ทำปฏิกิริยาที่เลือกจะจัดการให้คุณ
value / onChange - ระบุค่าปัจจุบันของการควบคุมmenuIsOpen / onMenuOpen / onMenuClose - ควบคุมว่าเมนูเปิดอยู่inputValue / onInputChange - ควบคุมค่าของอินพุตการค้นหา (การเปลี่ยนสิ่งนี้จะอัปเดตตัวเลือกที่มีอยู่)หากคุณไม่ได้จัดเตรียมอุปกรณ์ประกอบฉากเหล่านี้คุณสามารถตั้งค่าเริ่มต้นของสถานะที่ควบคุม:
defaultValue - ตั้งค่าเริ่มต้นของการควบคุมdefaultMenuIsOpen - ตั้งค่าเปิดเริ่มต้นของเมนูdefaultInputValue - ตั้งค่าเริ่มต้นของอินพุตการค้นหา React-Select เปิดเผยสองวิธีในที่สาธารณะ:
focus() - มุ่งเน้นการควบคุมโดยทางโปรแกรมblur() - เบลอการควบคุมแบบโปรแกรม ตรวจสอบเอกสารเพิ่มเติมเกี่ยวกับ:
การเปิดตัว V5 หมายถึงการเขียนใหม่จาก JavaScript ไปยัง TypeScript ประเภทสำหรับ V4 และรุ่นก่อนหน้านี้มีอยู่ที่ @types ดูคู่มือ TypeScript สำหรับวิธีการใช้ประเภทที่เริ่มต้นด้วย V5
ขอบคุณทุกคนที่มีส่วนร่วมในโครงการนี้ มันเป็นการขับขี่ที่ดุเดือด
ถ้าคุณชอบ React Select คุณควรติดตามฉันบน Twitter!
ตะโกนออกไปที่ Joss Mackison, Charles Lee, Ben Conolly, Tom Walker, Nathan Bierema, Eric Bonow, Emma Hamilton, Dave Brotherstone, Brian Vaughn และทีมระบบการออกแบบของ Atlassian
MIT ได้รับใบอนุญาต ลิขสิทธิ์ (c) เจดวัตสัน 2022
