قم بإنشاء قوائم منسدلة جميلة باستخدام React Select

القراء مثلك يساعدون في دعم MUO. عند إجراء عملية شراء باستخدام الروابط الموجودة على موقعنا، قد نكسب عمولة تابعة. اقرأ أكثر.

يعد الإدخال المحدد أحد مكونات تطبيق الويب المفيدة التي تتيح لك اختيار قيمة من بين العديد من الخيارات دون شغل مساحة كبيرة. لكن التصميم الافتراضي يمكن أن يكون مملًا ويتعارض مع بقية تصميمك.

فيديو MUO لهذا اليوم قم بالتمرير للمتابعة مع المحتوى

يوفر React Select حلاً مرنًا وقابلاً للتخصيص لتحسين مظهر ووظيفة مدخلات القائمة المنسدلة.

---

---

تثبيت React Select

دمج React مع المكتبات أو التقنيات الأخرى ، مثل React Select وReact Redux وغيرها الكثير، يمكنها تبسيط عملية التطوير.

للبدء باستخدام React Select، عليك تثبيته في مشروعك. ل قم بذلك باستخدام npm ، قم بتشغيل هذا الأمر الطرفي في دليل المشروع الخاص بك:

 npm i --save react-select 

سيؤدي هذا إلى تثبيت المكتبة وإعدادها في مشروع React الخاص بك، حتى تتمكن من البدء في استخدامها.

إنشاء مدخلات محددة باستخدام React Select

الآن بعد أن قمت بإعداد المكتبة، يمكنك استخدامها لإنشاء مدخلات محددة. للقيام بذلك، سوف تستخدم يختار عنصر. يعد هذا مكونًا قابلاً للتخصيص بدرجة كبيرة ويتيح للمستخدمين تحديد الخيارات من القائمة.

فيما يلي مثال لكيفية استخدام مكون التحديد:

---

---

 import React from "react" 
import Select from "react-select" 
 
function App() { 
  const options = [ 
    { value: "apple", label: "Apple" }, 
    { value: "pineapple", label: "Pineapple" }, 
    { value: "watermelon", label: "Watermelon" }, 
  ] 
 
  return ( 
    <div> 
      <Select options={options} /> 
    </div> 
  ) 
} 
 
export default App 

يبدأ هذا المثال باستيراد ملف يختار المكون من ' رد فعل حدد '. وهو يحدد خيارات مصفوفة تحتوي على ثلاثة كائنات، لكل منها ملف قيمة و أ ملصق ملكية. تمثل الخاصية value القيمة التي سيرسلها النموذج إلى الواجهة الخلفية عند إرساله. خاصية التسمية هي النص الذي سيعرضه مكون التحديد في القائمة المنسدلة.

عند تقديم مكون التحديد، قم بتمرير مصفوفة الخيارات إليه باستخدام الأمر خيارات دعم.

---

---

باستخدام كتلة التعليمات البرمجية هذه، ستقوم مكتبة React Select بإنشاء قائمة منسدلة مثل هذا:

تخصيص تحديد المدخلات

يوفر React Select طرقًا مختلفة لتخصيص المدخلات المحددة. يمكنك استخدام فئات CSS أو تطبيق الأنماط المضمنة مباشرةً على المدخلات المحددة، وفقًا لتفضيلاتك.

التخصيص مع فئات CSS

توفر مكتبة React Select ملفًا اسم الفئة الدعامة ل يختار عنصر. استخدم دعامة className هذه لتطبيق ورقة الأنماط المتتالية (CSS) المخصصة أنماط لمكونات تحديد الخاص بك.

على سبيل المثال:

 import React from "react" 
import Select from "react-select" 
 
function App() { 
  const options = [ 
    { value: "apple", label: "Apple" }, 
    { value: "pineapple", label: "Pineapple" }, 
    { value: "watermelon", label: "Watermelon" }, 
  ] 
 
  return ( 
    <div> 
      <Select options={options} className='select'/> 
    </div> 
  ) 
} 
 
export default App 

كتلة التعليمات البرمجية أعلاه مشابهة للكتلة السابقة، ولكنها تستخدم اسم الفئة Prop لتطبيق فئة CSS مخصصة على ملف يختار عنصر. قم بتوفير اسم في خاصية className ويمكنك استخدامه لتطبيق أنماط CSS على المكون:

 .select { 
  color: #333333; 
  font-family: cursive; 
  inline-size: 30%; 
  font-size: 11px; 
} 

بعد تحديد الأنماط، سيبدو إدخالك المحدد كما يلي:

التخصيص باستخدام الأنماط المضمنة

يمكنك أيضًا تحديد الأنماط المضمنة في كائن تمرره عبر ملف الأنماط دعامة من يختار عنصر. يمنحك هذا مزيدًا من التحكم في نمط العناصر الفردية.

هنا مثال:

 import React from "react" 
import Select from "react-select" 
 
function App() { 
  const options = [ 
    { value: "apple", label: "Apple" }, 
    { value: "pineapple", label: "Pineapple" }, 
    { value: "watermelon", label: "Watermelon" }, 
  ] 
 
  const customStyles = { 
    control: (baseStyles, state) => ({ 
      ...baseStyles, 
      backgroundColor: "#e2e2e2", 
    }), 
    option: (baseStyles, state) => ({ 
      ...baseStyles, 
      backgroundColor: state.isFocused ? "#e2e2e2" : "", 
      color: state.isFocused ? "#333333" : "#FFFFFF", 
    }), 
    menu: (baseStyles, state) => ({ 
      ...baseStyles, 
      backgroundColor: "#333333", 
    }), 
  } 
 
  return ( 
    <div> 
      <Select options={options} styles={customStyles} /> 
    </div> 
  ) 
} 
 
export default App 

كائن الدعامة, customStyles يحتوي على خصائص النمط لمكونات التحديد يتحكم , خيار ، و قائمة طعام القطع. هذه الخصائص هي وظائف تأخذ وسيطتين: com.baseStyles و ولاية .

تمثل المعلمة baseStyles الأنماط الافتراضية التي يوفرها React Select، بينما تمثل المعلمة الحالة الحالة الحالية للعنصر. في هذا المثال، تستخدم الوظائف عامل الانتشار لدمج الأنماط الأساسية مع الأنماط الإضافية لكل جزء من المكون.

بعد تطبيق هذه الأنماط، يجب أن يبدو الإدخال المحدد كما يلي:

إضافة وظيفة إلى تحديد المدخلات

يوفر React Select العديد من الميزات لتحسين وظيفة المدخلات المحددة. يمكنك تمكين وظيفة التحديد المتعدد والبحث، وحتى إنشاء مكونات قائمة منسدلة مخصصة.

وظيفة التحديد المتعدد

لتمكين وظيفة التحديد المتعدد في القوائم المنسدلة، قم بتمرير isMulti دعم للمكون المحدد. يتيح ذلك للمستخدمين تحديد خيارات متعددة من القائمة المنسدلة.

على سبيل المثال:

 import React from "react" 
import Select from "react-select" 
 
function App() { 
  const options = [ 
    { value: "apple", label: "Apple" }, 
    { value: "pineapple", label: "Pineapple" }, 
    { value: "watermelon", label: "Watermelon" }, 
    { value: "grapes", label: "Grapes" }, 
    { value: "orange", label: "Orange" }, 
  ] 
 
  return ( 
    <div> 
      <Select options={options} isMulti /> 
    </div> 
  ) 
} 
 
export default App 

يوضح هذا المثال كيفية استخدام isMulti Prop لإضافة وظيفة التحديد المتعدد إلى المدخلات المحددة الخاصة بك.

وظيفة البحث

توفر مكتبة React Select وظيفة بحث مدمجة لتصفية الخيارات بسهولة. افتراضيًا، يعرض مكون التحديد مدخلات البحث عند فتح القائمة المنسدلة. يمكن للمستخدمين كتابة إدخال البحث لتصفية الخيارات المتاحة.

لتمكين وظيفة البحث، قم بتمرير قابل للبحث دعم ل يختار عنصر. مثل ال isMulti الدعامة، isSearchable يقبل قيمة منطقية.

فيما يلي مثال لكيفية استخدام الخاصية isSearchable لتمكين وظيفة البحث:

 import React from "react" 
import Select from "react-select" 
 
function App() { 
  const options = [ 
    { value: "apple", label: "Apple" }, 
    { value: "apricot", label: "Apricot" }, 
    { value: "mango", label: "Mango" }, 
    { value: "mangosteens", label: "Mangosteens" }, 
    { value: "avocado", label: "Avocado" }, 
  ] 
 
  return ( 
    <div> 
      <Select options={options} isSearchable /> 
    </div> 
  ) 
} 
 
export default App 

سيؤدي عرض مقطع التعليمات البرمجية أعلاه إلى عرض إدخال محدد مع وظيفة البحث. سيبدو ويعمل مثل هذا:

إنشاء مكونات منسدلة مخصصة

يتيح لك React Select إنشاء مكونات قائمة منسدلة مخصصة باستخدام خاصية المكونات. يمكنك تجاوز المكونات الافتراضية التي يوفرها React Select وتخصيص مظهر القائمة المنسدلة وسلوكها لتناسب ذوقك.

على سبيل المثال:

 import React from "react" 
import Select, { components } from "react-select" 
 
function App() { 
  const CustomOption = (obj) => ( 
    <div {...obj.innerProps}> 
      <span>{obj.label}</span> 
      <span style={{ marginInlineStart: "0.2rem" }}>Fruit</span> 
    </div> 
  ) 
 
  const CustomDropdownIndicator = (props) => ( 
    <components.DropdownIndicator {...props}> 
      <span>&darr;</span> 
    </components.DropdownIndicator> 
  ) 
 
  const options = [ 
    { value: "apple", label: "Apple" }, 
    { value: "pineapple", label: "Pineapple" }, 
    { value: "watermelon", label: "Watermelon" }, 
  ] 
 
  const customComponents = { 
    Option: CustomOption, 
    DropdownIndicator: CustomDropdownIndicator, 
  } 
 
  return <Select options={options} components={customComponents} /> 
} 
 
export default App 

يوضح مقطع التعليمات البرمجية هذا كيفية إنشاء مكونات مخصصة لإدخال محدد باستخدام عناصر دعامة من يختار عنصر. يقوم باستيراد عناصر الكائن عبارة عن مجموعة من المكونات المحددة مسبقًا والتي يمكنك استخدامها لتخصيص مظهر وسلوك العناصر المختلفة في مدخلاتك المحددة.

يحدد الكود مكونين وظيفيين: خيار مخصص و CustomDropdownIndicator . يأخذ مكون CustomOption كائنًا كمعلمة. يحتوي هذا الكائن على خصائص متنوعة يوفرها React Select، مثل InnerProps و ملصق .

الصوت الرقمي spdif لا صوت ويندوز 10

يأخذ مكون CustomDropdownIndicator الدعائم كمعلمة. يعرض هذا المكون مؤشرًا منسدلًا مخصصًا برمز سهم لأسفل. يقوم الكود بإنشاء أ customComponents كائن يقوم بتعيين مكونات CustomOption وCustomDropdownIndicator إلى العناصر المقابلة خيار و DropdownIndicator مفاتيح.

أخيرًا، يقوم هذا الكود بتمرير كائن customComponents إلى خاصية المكونات الخاصة بمكون التحديد. سيؤدي هذا إلى عرض إدخال محدد مع المكونات المخصصة، ويبدو كما يلي:

يمكن أن تكون المكونات القياسية أكثر قوة وجاذبية

React Select هي مكتبة قوية تتيح لك إنشاء مدخلات محددة جميلة وأنيقة في React. يمكنك تخصيص المدخلات المحددة وإضافة وظائف إليها وإنشاء مكونات قائمة منسدلة مخصصة. من خلال الاستفادة من هذه المكتبة، يمكنك تحسين المظهر وتجربة المستخدم لتطبيقات React الخاصة بك.