ReactJS 突出显示下拉选项

突出显示下拉选项是很重要的，因为它提高了菜单的可用性，使用户更容易识别他们正在悬停的选项。

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

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

在ReactJS中创建带有选项高亮的交互式下拉菜单

用户可以按照下面的步骤来实现ReactJS下拉菜单中的选项高亮。

第1步 – 创建一个渲染下拉菜单的功能组件。
第2步 – 使用useState钩子来跟踪当前选择的选项。
第 3步 – 创建一个函数，根据用户的输入过滤选项。使用过滤器方法来返回一个与用户输入相匹配的选项数组。
第4步 – 接下来，在组件的JSX中渲染搜索输入栏和下拉菜单。我们需要使用value和onChange道具来处理输入栏和所选选项的变化。
第5步 – 使用样式道具为所选选项应用背景色。

例子

在这个例子中，一个输入字段被添加到下拉菜单中，它允许用户通过输入来搜索一个选项。搜索状态属性被用来跟踪用户的输入，而filteredOptions变量被用来根据用户的输入来过滤选项。匹配用户输入的选项通过在选项标签上添加CSS类 “高亮 “而被高亮。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;

输出

在ReactJS中突出显示下拉选项

例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;