使用 React Select 建立漂亮的下拉式選單
選擇輸入是一個有用的 Web 應用程式元件，可讓您從多個選項中選擇一個值，而無需佔用太多空間。但預設樣式可能會很沉悶，並且與設計的其他部分發生衝突。
React Select 提供了一種適應性強且量身定制的方法來提升下拉輸入元素的視覺吸引力和性能，為開發人員提供了增強使用者介面設計的多功能工具。
安裝 React Select
將 React 與各種附加程式庫或技術相結合可以透過在這些元件之間提供無縫整合來簡化開發工作流程。此類整合的範例包括 React Select、React Redux 等，它們提供了管理應用程式內複雜功能的統一方法。
要在專案中開始使用 React Select，人們必須透過現有的努力將其合併為一個安裝。為了透過套件管理器 npm 完成此任務，請導航至專案的根目錄並從終端執行後續命令:
npm i --save react-select
上述流程將有助於將指定庫整合到您的 React 應用程式中，從而實現其利用。
使用 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”庫導入“Select”元件。然後，我們建立一個包含三個物件的選項數組，其中每個物件擁有兩個屬性-“value”屬性和“label”屬性。 「value」屬性表示提交表單時應傳輸到伺服器的數據，而「label」屬性表示下拉清單中顯示的文字。
渲染 Select 元件時，必須利用「options」屬性提供選項清單作為輸入。這使得組件能夠有效地運行並為用戶顯示所需的選擇。
此程式碼區塊允許利用 React Select 庫來建立具有以下外觀的選擇選單:
自訂選擇輸入
React Select 提供了多種選項，透過利用 CSS 類別或採用最適合設計偏好的內聯樣式技術來客製化其選擇元素的外觀和功能。
使用 CSS 類別進行自訂
React Select 函式庫為 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
提供的程式碼片段示範了 JavaScript 程式語言語法的實例。它涉及 HTML 元素及其各自的屬性。具體來說，它說明了「`」元素中「className」屬性的使用，允許透過提供唯一標識符字串作為其值來應用自訂 CSS 類別。這種做法可以對渲染元件的視覺外觀進行樣式自訂。
.select {
color: #333333;
font-family: cursive;
inline-size: 30%;
font-size: 11px;
}
建立這些樣式後，選擇輸入的外觀將如下所示:
使用內聯樣式進行自訂
或者，可以透過將內聯樣式合併到樣式物件中來實現內聯樣式，該樣式物件隨後會作為參數傳遞給與「Select」元件關聯的「styles」屬性。這種方法在控制特定組件的外觀時可以提供更大的靈活性和精確度。
這是一個例子:
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
TypeScript 中的「customStyles」物件可作為專為 React Select 庫中的各種元件客製化的樣式屬性儲存庫。這些樣式封裝在接受兩個參數的函數中-baseStyles 表示一組可繼承的預設屬性，以及 state 表示相關元素的目前配置或狀態。透過採用這種方法，開發人員可以輕鬆修改不同的視覺特徵並將其應用於 Select 組件的 Control、Option 和 Menu 元素。
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”屬性的提供並行，這也需要布林輸入。
考慮以下程式碼片段，它演示了用於在 React 元件中啟用搜尋功能的「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
程式碼區塊在渲染時將產生一個「select」類型的 HTML 元素，該元素能夠透過其下拉式選單執行搜尋。所述元素的外觀和行為將類似於以下結構:
建立自訂下拉元件
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>↓</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
提供的程式碼說明了利用「Select」元素的「components」屬性為下拉式選單製作自訂元件的過程。為了實現這一點，它導入了「組件」對象，該對像作為預製組件的累積，有助於與下拉式選單相關的各種視覺方面和功能的個性化。
CustomOption 和 CustomDropdownIndicator。前一個元件接受一個物件形式的參數，該物件包含通常由 React Select 提供的幾個屬性，例如 innerProps 和 label。
CustomDropdownIndicator 元件接受 prop(s) 形式的參數。它負責呈現具有標誌性向下箭頭的自訂下拉指示器。為了實現這一點，它利用了一個 customComponents 對象，該物件透過將 CustomOption 和 CustomDropdownIndicator 元件映射到各自的 Option 和 DropdownIndicator 鍵來在 CustomOption 和 CustomDropdownIndicator 元件之間建立對應關係。
最終，此腳本將“customComponents”物件傳輸到“Select”元素的“components”屬性。因此，它會產生一個具有自訂元件的選擇輸入，如下所示:
標準組件可以更強大、更有吸引力
React Select 是一種高級工具，可讓開發人員在 React 框架內建立具有視覺吸引力且設計良好的選擇輸入。該庫提供了客製化這些輸入元素的外觀和添加功能以滿足特定要求的靈活性。透過利用 React Select，人們可以顯著提高 React 應用程式的視覺吸引力和整體用戶互動。