react实现下拉

使用原生HTML和React状态实现下拉菜单

通过React的状态管理控制下拉菜单的显示与隐藏。创建一个按钮触发下拉，使用useState管理展开状态。

import React, { useState } from 'react';

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

  return (
    <div className="dropdown">
      <button onClick={() => setIsOpen(!isOpen)}>Toggle Dropdown</button>
      {isOpen && (
        <ul className="dropdown-menu">
          <li>Option 1</li>
          <li>Option 2</li>
          <li>Option 3</li>
        </ul>
      )}
    </div>
  );
}

添加点击外部关闭功能

引入useRef和useEffect实现点击下拉区域外自动关闭的功能。检测点击事件是否发生在下拉元素外部。

import React, { useState, useRef, useEffect } 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}>
      <button onClick={() => setIsOpen(!isOpen)}>Toggle Dropdown</button>
      {isOpen && (
        <ul className="dropdown-menu">
          <li>Option 1</li>
          <li>Option 2</li>
          <li>Option 3</li>
        </ul>
      )}
    </div>
  );
}

使用第三方库react-select

对于复杂需求如搜索、多选等，可使用专为React设计的react-select库。安装后直接调用组件即可获得丰富功能。

npm install react-select

import React from 'react';
import Select from 'react-select';

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

function App() {
  return <Select options={options} />;
}

添加动画效果

使用CSS过渡或动画库增强用户体验。通过动态类名控制过渡效果，使下拉更平滑。

.dropdown-menu {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s, transform 0.3s;
}

.dropdown-menu.open {
  opacity: 1;
  transform: translateY(0);
}

<ul className={`dropdown-menu ${isOpen ? 'open' : ''}`}>
  <li>Option 1</li>
  <li>Option 2</li>
  <li>Option 3</li>
</ul>