資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究在 ReactJS 中突出顯示下拉選項
突出顯示下拉選項非常重要，因為它可以透過使使用者更容易識別他們正在懸停的選項來提高選單的可用性。
當用戶將滑鼠懸停在某個選項上時，它會突出顯示，使其在其他選項中脫穎而出。這有助於使用者快速識別他們感興趣的選項並進行選擇。
此外，突出顯示下拉選項是提高選單可用性和可訪問性的簡單但有效的方法。
在 ReactJS 中建立帶有選項突出顯示的互動式下拉選單
使用者可以按照以下步驟在 ReactJS 下拉選單中實現選項突出顯示。
步驟 1 − 建立一個渲染下拉選單的功能元件。
步驟 2 − 使用 useState 鉤子跟蹤當前選定的選項。
步驟 3 − 建立一個根據使用者輸入過濾選項的功能。使用 filter 方法返回與使用者輸入匹配的選項陣列。
步驟 4 − 接下來，在元件的 JSX 中渲染搜尋輸入欄位和下拉選單。我們需要使用 value 和 onChange 屬性來處理輸入欄位和所選選項的變化。
步驟 5 − 使用 style 屬性為所選選項應用背景顏色。
示例
在這個例子中，一個輸入欄位被新增到下拉選單中，允許使用者透過鍵入來搜尋選項。search 狀態屬性用於跟蹤使用者的輸入，filteredOptions 變數用於根據使用者的輸入過濾選項。與使用者輸入匹配的選項透過在 option 標籤上新增 CSS 類 'highlighted' 來突出顯示。onChange 事件處理輸入欄位和所選選項的變化。
import React, { useState } from 'react';
const options = ['Hello World', 'Option 2', 'Option 3'];
function Dropdown() {
const [selected, setSelected] = useState('');
const [search, setSearch] = useState('');
const filteredOptions = options.filter(option =>
option.toLowerCase().includes(search.toLowerCase())
);
return (
<div>
<input
type="text"
placeholder="Search..."
value={search}
onChange={e => setSearch(e.target.value)}
/>
<select
value={selected}
onChange={e => setSelected(e.target.value)} >
{filteredOptions.map(option => (
<option
key={option}
value={option}
className={selected === option ? "highlighted" : ""}>
{option}
</option>
))}
</select>
<div>Selected: {selected}</div>
</div>
);
}
export default Dropdown;
輸出
示例 2
在這個例子中，onInput 事件處理輸入欄位的變化。handleSearch 函式根據使用者的輸入過濾選項並更新 filteredOptions 狀態屬性。
其餘程式碼與前面的示例類似，我們更新過濾後的選項，處理所選選項，並使用三元運算子突出顯示所選選項。
import React, { useState } from 'react';
const options = ['Option 1', 'Option 2', 'Option 3'];
function Dropdown() {
const [selected, setSelected] = useState('');
const [search, setSearch] = useState('');
const [filteredOptions, setFilteredOptions] = useState(options);
const handleSearch = event => {
setSearch(event.target.value);
setFilteredOptions(options.filter(option =>
option.toLowerCase().includes(search.toLowerCase())
));
}
return (
<div>
<input
type="text"
placeholder="Search..."
value={search}
onInput={handleSearch}
/>
<select
value={selected}
onChange={e => setSelected(e.target.value)} >
{filteredOptions.map(option => (
<option
key={option}
value={option}
className={selected === option ? "highlighted" : ""} >
{option}
</option>
))}
</select>
<div>Selected: {selected}</div>
</div>
);
}
export default Dropdown;
輸出
我們學習瞭如何在 ReactJS 中透過實現選項突出顯示來建立互動式下拉選單。我們還學習瞭如何建立一個渲染下拉選單的功能元件。
我們建立了一個使用者友好且互動式的下拉選單，增強了使用者體驗。
799 次檢視
