当前位置：首页 > React

react 如何做下拉菜单

2026-01-25 18:20:33React

使用 React 创建下拉菜单

基础实现（原生 HTML + React 状态）

import { useState } from 'react';

function Dropdown() {
  const [isOpen, setIsOpen] = useState(false);
  const [selectedOption, setSelectedOption] = useState('Select an option');

  const options = ['Option 1', 'Option 2', 'Option 3'];

  const toggleDropdown = () => setIsOpen(!isOpen);

  const handleOptionClick = (option) => {
    setSelectedOption(option);
    setIsOpen(false);
  };

  return (
    <div className="dropdown">
      <button className="dropdown-toggle" onClick={toggleDropdown}>
        {selectedOption}
      </button>
      {isOpen && (
        <ul className="dropdown-menu">
          {options.map((option) => (
            <li key={option} onClick={() => handleOptionClick(option)}>
              {option}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

使用第三方库（如 react-select）

安装 react-select：

npm install react-select

实现代码：

import Select from 'react-select';

const options = [
  { value: 'option1', label: 'Option 1' },
  { value: 'option2', label: 'Option 2' },
  { value: 'option3', label: 'Option 3' }
];

function App() {
  const [selectedOption, setSelectedOption] = useState(null);

  return (
    <Select
      defaultValue={selectedOption}
      onChange={setSelectedOption}
      options={options}
    />
  );
}

添加样式

对于原生实现，添加 CSS：

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-toggle {
  padding: 8px 16px;
  background: #fff;
  border: 1px solid #ccc;
  cursor: pointer;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid #ccc;
  width: 100%;
}

.dropdown-menu li {
  padding: 8px 16px;
  cursor: pointer;
}

.dropdown-menu li:hover {
  background: #f0f0f0;
}

可访问性改进

添加 ARIA 属性：

<div className="dropdown" role="combobox" aria-expanded={isOpen} aria-haspopup="listbox">
  <button 
    className="dropdown-toggle" 
    onClick={toggleDropdown}
    aria-controls="dropdown-menu"
  >
    {selectedOption}
  </button>
  {isOpen && (
    <ul className="dropdown-menu" id="dropdown-menu" role="listbox">
      {options.map((option) => (
        <li 
          key={option} 
          onClick={() => handleOptionClick(option)}
          role="option"
          aria-selected={selectedOption === option}
        >
          {option}
        </li>
      ))}
    </ul>
  )}
</div>

点击外部关闭

添加点击外部关闭功能：

import { useState, useEffect, useRef } from 'react';

function Dropdown() {
  const [isOpen, setIsOpen] = useState(false);
  const dropdownRef = useRef(null);

  useEffect(() => {
    const handleClickOutside = (event) => {
      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
        setIsOpen(false);
      }
    };

    document.addEventListener('mousedown', handleClickOutside);
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, []);

  return (
    <div className="dropdown" ref={dropdownRef}>
      {/* 其余代码保持不变 */}
    </div>
  );
}

react 如何做下拉菜单