تحديد التحكم في رد الفعل. بنيت في البداية للاستخدام في keystonejs.
انظر React-select.com للحصول على عروض تجريبية حية ومستندات شاملة.
يتم تمويل react-select بواسطة ThinkMill و Atlassian. نحن مشروع مفتوح المصدر يدعمه المجتمع باستمرار.
يساعدك React Select على تطوير مكونات محددة قوية تعمل فقط خارج المربع ، دون منعك من تخصيص الأجزاء المهمة بالنسبة لك.
للقصة وراء هذا المكون ، شاهد حديث Jed في 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 - تطبيق اسم classnclassNamePrefix - تطبيق أسماء classnisDisabled - تعطيل السيطرةisMulti - اسمح للمستخدم بتحديد قيم متعددةisSearchable - اسمح للمستخدم بالبحث عن خيارات المطابقةname - إنشاء إدخال HTML بهذا الاسم ، يحتوي على القيمة الحاليةonChange - اشترك في تغيير الأحداثoptions - حدد الخيارات التي يمكن للمستخدم تحديدها منplaceholder - قم بتغيير النص المعروض عند تحديد أي خيارnoOptionsMessage - ({inputValue: string}) => String | NULL - نص للعرض عندما لا توجد خياراتvalue - التحكم في القيمة الحاليةراجع وثائق الدعائم للحصول على وثائق كاملة على دعامات رد فعل الدعائم.
يمكنك التحكم في الدعائم التالية من خلال توفير القيم لهم. إذا لم تقم بذلك ، فإن React-Select ستديرها من أجلك.
value / onChange - حدد القيمة الحالية لعنصر التحكمmenuIsOpen / onMenuOpen / onMenuClose - التحكم في ما إذا كانت القائمة مفتوحةinputValue / onInputChange - التحكم في قيمة إدخال البحث (تغيير هذا سيقوم بتحديث الخيارات المتاحة)إذا لم تقدم هذه الدعائم ، فيمكنك تعيين القيمة الأولية للحالة التي تتحكم فيها:
defaultValue - اضبط القيمة الأولية لعنصر التحكمdefaultMenuIsOpen - اضبط القيمة المفتوحة الأولية للقائمةdefaultInputValue - اضبط القيمة الأولية لإدخال البحث React-Select يعرض طريقتين عامتين:
focus() - ركز التحكم برمجيًاblur() - طمس التحكم برمجيًا تحقق من المستندات لمزيد من المعلومات حول:
يمثل إصدار V5 إعادة كتابة من JavaScript إلى TypeScript. تتوفر أنواع V4 والإصدارات السابقة في Types. راجع دليل TypeScript حول كيفية استخدام الأنواع التي تبدأ بـ V5.
شكراً لكل من ساهم في هذا المشروع. لقد كانت رحلة برية.
إذا كنت تحب React Select ، فيجب عليك متابعتي على Twitter!
الصراخ إلى جوس ماكسون ، تشارلز لي ، بن كونولي ، توم ووكر ، ناثان بيرما ، إريك بونو ، إيما هاميلتون ، ديف بروثرستون ، براين فون ، وفريق نظام التصميم الأطلسي الذي جعل هذا الأمر ممكنًا إلى جانب ذلك.
معهد ماساتشوستس للتكنولوجيا مرخصة. حقوق الطبع والنشر (C) Jed Watson 2022.
