在 ReactJS 中高亮显示下拉选项

react jsweb developmentfront end technology更新于 2026/1/22 15:07:17

高亮显示下拉选项非常重要，因为它可以让用户更轻松地识别悬停在其上的选项，从而提高菜单的可用性。

当用户将鼠标悬停在某个选项上时，该选项会高亮显示，使其从其他选项中脱颖而出。这有助于用户快速识别他们感兴趣的选项并选择。

此外，突出显示下拉选项是提高菜单可用性和可访问性的简单而有效的方法。

在 ReactJS 中创建带有选项突出显示的交互式下拉菜单

用户可以按照以下步骤在 ReactJS 下拉菜单中实现选项突出显示。

步骤 1 - 创建一个用于渲染下拉菜单的函数组件。
步骤 2 - 使用 useState 钩子跟踪当前选定的选项。
步骤 3 - 创建一个根据用户输入过滤选项的函数。使用 filter 方法返回与用户输入匹配的选项数组。
步骤 4 - 接下来，在组件的 JSX 中渲染搜索输入字段和下拉菜单。我们需要使用 value 和 onChange 属性来处理输入字段和所选选项的变化。
步骤 5 - 使用 style 属性为所选选项应用背景颜色。

示例

在此示例中，向下拉菜单中添加了一个输入字段，允许用户通过输入来搜索选项。搜索 state 属性用于跟踪用户的输入，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;