สร้างดรอปดาวน์ที่สวยงามด้วย React Select

อินพุตแบบเลือกเป็นส่วนประกอบของเว็บแอปที่มีประโยชน์ซึ่งช่วยให้คุณสามารถเลือกค่าจากตัวเลือกต่างๆ ได้โดยไม่ต้องใช้พื้นที่มากนัก แต่สไตล์เริ่มต้นอาจดูหม่นหมองและขัดกับการออกแบบส่วนที่เหลือของคุณ

React Select นำเสนอแนวทางที่ปรับเปลี่ยนได้และออกแบบตามความต้องการเพื่อยกระดับทั้งรูปลักษณ์ที่น่าดึงดูดและประสิทธิภาพขององค์ประกอบอินพุตแบบเลื่อนลง โดยมอบเครื่องมืออเนกประสงค์สำหรับนักพัฒนาเพื่อปรับปรุงการออกแบบส่วนต่อประสานกับผู้ใช้

กำลังติดตั้ง React Select

การรวม React เข้ากับไลบรารีหรือเทคโนโลยีเพิ่มเติมต่างๆ สามารถปรับปรุงขั้นตอนการทำงานการพัฒนาให้ดีขึ้นได้โดยการผสานรวมระหว่างส่วนประกอบเหล่านี้ได้อย่างราบรื่น ตัวอย่างของการบูรณาการดังกล่าว ได้แก่ React Select, React Redux และอื่นๆ อีกมากมาย ซึ่งนำเสนอแนวทางแบบครบวงจรในการจัดการฟังก์ชันการทำงานที่ซับซ้อนภายในแอปพลิเคชัน

เพื่อเริ่มต้นการใช้งาน React Select ภายในโปรเจ็กต์ เราจะต้องรวมมันเป็นการติดตั้งผ่านความพยายามที่มีอยู่ เพื่อให้บรรลุผลสำเร็จผ่านทางตัวจัดการแพ็คเกจ npm ให้นำทางไปยังไดเร็กทอรีรากของโปรเจ็กต์และดำเนินการคำสั่งที่ตามมาจากเทอร์มินัล:

 npm i --save react-select

กระบวนการที่กล่าวมาข้างต้นจะอำนวยความสะดวกในการรวมไลบรารีที่ระบุภายในแอปพลิเคชัน React ของคุณ ซึ่งจะทำให้สามารถใช้งานได้

การสร้างอินพุตที่เลือกด้วยการเลือกตอบสนอง

เมื่อสร้างไลบรารีแล้ว การใช้ประโยชน์จะทำให้สามารถสร้างองค์ประกอบอินพุตที่เลือกได้ผ่านการใช้ส่วนประกอบ Select ที่หลากหลายและกำหนดค่าได้ ส่วนประกอบนี้อำนวยความสะดวกในการเลือกผู้ใช้จากตัวเลือกที่มีอยู่มากมาย

โค้ดที่ให้มาสาธิตการใช้งานคอมโพเนนต์ React Native Select ซึ่งอนุญาตให้ผู้ใช้เลือกตัวเลือกตั้งแต่หนึ่งตัวเลือกขึ้นไปจากรายการ องค์ประกอบ ใช้สำหรับการป้อนข้อความเป็นอินพุตเพื่อกรองผลลัพธ์ตามคำสำคัญที่ผู้ใช้พิมพ์ เมื่อกดปุ่ม"Enter"ข้อมูลที่กรองจะแสดงในเมนูแบบเลื่อนลงใต้แถบค้นหาเพื่อให้ผู้ใช้เลือก

 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

ในภาพประกอบนี้ เรานำเข้าส่วนประกอบ’เลือก’จากไลบรารี’react-select’จากนั้นเราสร้างอาร์เรย์ตัวเลือกที่มีวัตถุสามชิ้น โดยที่แต่ละวัตถุมีคุณสมบัติสองประการ ได้แก่ คุณลักษณะ’value’และแอตทริบิวต์’label’คุณลักษณะ’value’หมายถึงข้อมูลที่จะถูกส่งไปยังเซิร์ฟเวอร์เมื่อส่งแบบฟอร์ม ในขณะที่แอตทริบิวต์’label’หมายถึงข้อความที่แสดงอยู่ในรายการแบบเลื่อนลง

เมื่อแสดงผลองค์ประกอบ Select จำเป็นต้องจัดเตรียมรายการตัวเลือกเป็นอินพุตโดยใช้คุณสมบัติ"options"ช่วยให้ส่วนประกอบทำงานได้อย่างมีประสิทธิภาพและแสดงตัวเลือกการเลือกที่ต้องการสำหรับผู้ใช้

บล็อกโค้ดนี้ช่วยให้สามารถใช้ประโยชน์จากไลบรารี React Select เพื่อสร้างเมนูเลือกที่มีลักษณะดังต่อไปนี้:

การปรับแต่งอินพุตที่เลือก

React Select มีตัวเลือกมากมายสำหรับปรับแต่งรูปลักษณ์และฟังก์ชันการทำงานขององค์ประกอบที่เลือกผ่านการใช้คลาส CSS หรือโดยการใช้เทคนิคการจัดสไตล์แบบอินไลน์ที่เหมาะกับความต้องการในการออกแบบมากที่สุด

การปรับแต่งด้วยคลาส CSS

ไลบรารี React Select มอบคุณสมบัติ className สำหรับส่วนประกอบ Select ซึ่งช่วยให้ผู้ใช้สามารถระบุ Cascading Style Sheets (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

ข้อมูลโค้ดที่ให้มาสาธิตตัวอย่างไวยากรณ์ภาษาการเขียนโปรแกรม JavaScript มันเกี่ยวข้องกับองค์ประกอบ HTML และคุณลักษณะที่เกี่ยวข้อง โดยเฉพาะอย่างยิ่ง แสดงให้เห็นการใช้งานแอตทริบิวต์ 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 ใน TypeScript ทำหน้าที่เป็นพื้นที่เก็บข้อมูลคุณสมบัติโวหารที่ปรับแต่งมาโดยเฉพาะสำหรับส่วนประกอบต่างๆ ภายในไลบรารี React Select สไตล์เหล่านี้ถูกห่อหุ้มไว้ภายในฟังก์ชันที่ยอมรับพารามิเตอร์สองตัว ได้แก่ baseStyles ซึ่งแสดงถึงชุดแอตทริบิวต์เริ่มต้นที่สืบทอดได้ และ state ซึ่งแสดงถึงการกำหนดค่าปัจจุบันหรือสถานะขององค์ประกอบที่เป็นปัญหา ด้วยการใช้วิธีการนี้ นักพัฒนาสามารถปรับเปลี่ยนและใช้ลักษณะการมองเห็นที่แตกต่างกับองค์ประกอบการควบคุม ตัวเลือก และเมนูของส่วนประกอบเลือกได้อย่างง่ายดาย

พารามิเตอร์ baseStyles บ่งบอกถึงคุณลักษณะการออกแบบมาตรฐานที่จัดทำโดย React Select ในขณะที่พารามิเตอร์ state แสดงถึงสภาพปัจจุบันของส่วนประกอบ ในที่นี้ ทั้งสองใช้ตัวดำเนินการสเปรดควบคู่กันเพื่อรวมคุณลักษณะการจัดรูปแบบพื้นฐานที่กล่าวมาข้างต้น พร้อมกับการกำหนดค่าภาพเพิ่มเติมสำหรับทุกส่วนของอินเทอร์เฟซ

หลังจากปรับใช้การปรับเปลี่ยนรูปแบบเหล่านี้ ช่องป้อนข้อมูลที่คุณเลือกจะแสดงการนำเสนอที่คล้ายกับตัวอย่างที่ให้ไว้ด้านล่าง:

การเพิ่มฟังก์ชันการทำงานให้กับอินพุตที่เลือก

React Select นำเสนอความสามารถที่หลากหลายซึ่งเพิ่มอรรถประโยชน์ให้กับองค์ประกอบที่เลือก หนึ่งในนั้นคือความสามารถในการใช้ฟังก์ชันการเลือกและการค้นหาหลายรายการ รวมถึงการสร้างเมนูแบบเลื่อนลงที่ปรับแต่งโดยเฉพาะ

ฟังก์ชั่นเลือกได้หลายรายการ

เพื่อให้ผู้ใช้สามารถเลือกได้หลายตัวเลือกภายในรายการแบบเลื่อนลง คุณสามารถระบุแอตทริบิวต์"isMulti"เป็นพารามิเตอร์ให้กับองค์ประกอบ 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" },
    { value: "grapes", label: "Grapes" },
    { value: "orange", label: "Orange" },
  ]

  return (
    <div>
      <Select options={options} isMulti/>
    </div>
  )
}

export default App

ภาพประกอบนี้แสดงการใช้งานคุณสมบัติ"isMulti"ซึ่งเปิดใช้งานความสามารถในการเลือกหลายรายการสำหรับองค์ประกอบอินพุตที่เลือก

ฟังก์ชั่นการค้นหา

ไลบรารี React Select นำเสนอคุณลักษณะการค้นหาที่สะดวกสบาย ซึ่งรวมอยู่ในส่วนประกอบ Select ของมัน เมื่อเปิดเมนูแบบเลื่อนลง ลักษณะการทำงานเริ่มต้นของส่วนประกอบที่เลือกจะแสดงอินพุตการค้นหาเพื่อให้ผู้ใช้สามารถเข้าถึงได้ทันที หลังจากนั้นผู้ใช้สามารถป้อนคำค้นหาที่ต้องการผ่านการป้อนข้อมูลการค้นหาเพื่อจำกัดตัวเลือกที่แสดงให้แคบลงอย่างมีประสิทธิภาพตามเกณฑ์เฉพาะของพวกเขา

เพื่อให้ความสามารถในการค้นหาแก่องค์ประกอบ Select ให้ระบุคุณสมบัติ"isSearchable"ด้วยค่าบูลีน การดำเนินการนี้สอดคล้องกับข้อกำหนดของแอตทริบิวต์"isMulti"ซึ่งจำเป็นต้องมีอินพุตบูลีนด้วย

พิจารณาตัวอย่างโค้ดต่อไปนี้ ซึ่งสาธิตการใช้งานคุณสมบัติ isSearchable เพื่อเปิดใช้งานฟังก์ชันการค้นหาในส่วนประกอบ React:

 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

เมื่อแสดงผลบล็อกโค้ดจะสร้างองค์ประกอบ HTML ประเภท"select"ซึ่งมีความสามารถในการค้นหาผ่านเมนูแบบเลื่อนลง ลักษณะและพฤติกรรมขององค์ประกอบดังกล่าวจะมีลักษณะโครงสร้างดังนี้

สร้างส่วนประกอบแบบเลื่อนลงที่กำหนดเอง

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

รหัสที่ให้มาแสดงให้เห็นถึงกระบวนการประดิษฐ์ส่วนประกอบที่ออกแบบเฉพาะสำหรับเมนูแบบเลื่อนลงโดยใช้คุณสมบัติ"ส่วนประกอบ"ขององค์ประกอบ"เลือก"เพื่อให้บรรลุเป้าหมายนี้ ระบบจะนำเข้าออบเจ็กต์"ส่วนประกอบ"ซึ่งทำหน้าที่เป็นการสะสมของส่วนประกอบสำเร็จรูปที่อำนวยความสะดวกในการปรับแต่งลักษณะภาพและฟังก์ชันการทำงานต่างๆ ที่เกี่ยวข้องกับเมนูแบบเลื่อนลง

CustomOption และ CustomDropdownIndicator คอมโพเนนต์เดิมยอมรับอาร์กิวเมนต์ในรูปแบบของออบเจ็กต์ที่มีคุณสมบัติหลายอย่างที่โดยปกติแล้ว React Select เตรียมไว้ให้ เช่น InnerProps และป้ายกำกับ

ส่วนประกอบ CustomDropdownIndicator ยอมรับพารามิเตอร์ในรูปแบบของอุปกรณ์ประกอบฉาก มีหน้าที่รับผิดชอบในการแสดงผลตัวบ่งชี้แบบเลื่อนลงที่กำหนดเองซึ่งมีลูกศรชี้ลงที่เป็นสัญลักษณ์ เพื่อให้บรรลุเป้าหมายนี้ ระบบจะใช้ประโยชน์จากออบเจ็กต์ customComponents ซึ่งสร้างความสอดคล้องระหว่างคอมโพเนนต์ CustomOption และ CustomDropdownIndicator โดยการแมปองค์ประกอบเหล่านั้นกับคีย์ Option และ DropdownIndicator ที่เกี่ยวข้อง

ท้ายที่สุดแล้ว สคริปต์นี้จะถ่ายโอนออบเจ็กต์ customComponents ไปยังคุณสมบัติ คอมโพเนนต์ ขององค์ประกอบ’เลือก’ด้วยเหตุนี้ จึงสร้างอินพุตแบบเลือกที่มีส่วนประกอบที่กำหนดเองดังที่แสดงด้านล่าง:

ส่วนประกอบมาตรฐานสามารถมีประสิทธิภาพและน่าดึงดูดยิ่งขึ้น

React Select เป็นเครื่องมือขั้นสูงที่ช่วยให้นักพัฒนาสามารถสร้างอินพุตที่เลือกที่สวยงามและออกแบบมาอย่างดีภายในกรอบการทำงานของ React ไลบรารีให้ความยืดหยุ่นในการปรับแต่งรูปลักษณ์ขององค์ประกอบอินพุตเหล่านี้และเพิ่มฟังก์ชันการทำงานเพื่อให้ตรงตามข้อกำหนดเฉพาะ ด้วยการใช้ React Select เราสามารถปรับปรุงรูปลักษณ์และการโต้ตอบของผู้ใช้โดยรวมกับแอปพลิเคชัน React ได้อย่างมาก