当前位置：首页 > React

react如何自制下拉菜单

2026-01-25 01:25:00React

使用React自制下拉菜单

在React中自制下拉菜单可以通过多种方式实现，以下是一种常见的实现方法，基于函数组件和Hooks。

基本结构

创建一个自定义的下拉菜单组件，包含触发按钮和菜单项列表。

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

const Dropdown = ({ options, onSelect }) => {
  const [isOpen, setIsOpen] = useState(false);
  const [selectedOption, setSelectedOption] = useState(null);
  const dropdownRef = useRef(null);

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

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

  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}>
      <button className="dropdown-toggle" onClick={toggleDropdown}>
        {selectedOption || 'Select an option'}
      </button>
      {isOpen && (
        <ul className="dropdown-menu">
          {options.map((option) => (
            <li
              key={option}
              className="dropdown-item"
              onClick={() => handleOptionClick(option)}
            >
              {option}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default Dropdown;

样式实现

为下拉菜单添加基本样式，确保菜单项在触发按钮下方显示。

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

.dropdown-toggle {
  padding: 8px 16px;
  background-color: #f8f9fa;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

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

.dropdown-item:hover {
  background-color: #f8f9fa;
}

使用示例

在父组件中使用自定义下拉菜单组件，传递选项和回调函数。

import React from 'react';
import Dropdown from './Dropdown';

const App = () => {
  const options = ['Option 1', 'Option 2', 'Option 3'];

  const handleSelect = (option) => {
    console.log('Selected:', option);
  };

  return (
    <div>
      <h1>Custom Dropdown</h1>
      <Dropdown options={options} onSelect={handleSelect} />
    </div>
  );
};

export default App;

功能扩展

如果需要支持更复杂的功能，可以进一步扩展组件：

添加禁用状态
支持多级菜单
自定义渲染选项
支持搜索过滤

const EnhancedDropdown = ({ options, disabled, renderOption }) => {
  const [isOpen, setIsOpen] = useState(false);
  const [searchTerm, setSearchTerm] = useState('');

  const filteredOptions = options.filter(option =>
    option.toLowerCase().includes(searchTerm.toLowerCase())
  );

  return (
    <div className="dropdown">
      <button
        className="dropdown-toggle"
        onClick={() => !disabled && setIsOpen(!isOpen)}
        disabled={disabled}
      >
        Select an option
      </button>
      {isOpen && (
        <div className="dropdown-menu">
          <input
            type="text"
            placeholder="Search..."
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
          />
          <ul>
            {filteredOptions.map((option) => (
              <li key={option} onClick={() => setIsOpen(false)}>
                {renderOption ? renderOption(option) : option}
              </li>
            ))}
          </ul>
        </div>
      )}
    </div>
  );
};

通过以上方法，可以灵活地创建符合需求的自定义下拉菜单组件。

react如何自制下拉菜单