数据结构
网络
关系型数据库管理系统
操作系统
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 次查看
