react实现下拉选

实现React下拉选择框

使用React实现下拉选择框可以通过原生HTML元素或第三方库完成。以下是几种常见方法：

原生HTML select实现

使用原生<select>标签结合React状态管理：

import React, { useState } from 'react';

function NativeSelect() {
  const [selectedValue, setSelectedValue] = useState('');

  const handleChange = (event) => {
    setSelectedValue(event.target.value);
  };

  return (
    <div>
      <select value={selectedValue} onChange={handleChange}>
        <option value="">请选择</option>
        <option value="option1">选项1</option>
        <option value="option2">选项2</option>
        <option value="option3">选项3</option>
      </select>
      <p>当前选择: {selectedValue}</p>
    </div>
  );
}

自定义下拉组件

创建更灵活的自定义下拉组件：

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

function CustomDropdown({ options }) {
  const [isOpen, setIsOpen] = useState(false);
  const [selectedOption, setSelectedOption] = useState(null);
  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 
        className="dropdown-header" 
        onClick={() => setIsOpen(!isOpen)}
      >
        {selectedOption || '选择选项'}
      </div>
      {isOpen && (
        <ul className="dropdown-list">
          {options.map((option) => (
            <li
              key={option.value}
              onClick={() => {
                setSelectedOption(option.label);
                setIsOpen(false);
              }}
            >
              {option.label}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

使用第三方库

React-Select是流行的下拉选择库：

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

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' }
];

function ReactSelectExample() {
  const [selectedOption, setSelectedOption] = React.useState(null);

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

带搜索功能的下拉框

实现可搜索的下拉选择：

import React, { useState } from 'react';

function SearchableDropdown({ options }) {
  const [searchTerm, setSearchTerm] = useState('');
  const [isOpen, setIsOpen] = useState(false);
  const [selectedItem, setSelectedItem] = useState(null);

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

  return (
    <div className="searchable-dropdown">
      <input
        type="text"
        placeholder="搜索..."
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        onFocus={() => setIsOpen(true)}
      />
      {isOpen && (
        <ul className="dropdown-options">
          {filteredOptions.map((option) => (
            <li
              key={option.value}
              onClick={() => {
                setSelectedItem(option);
                setSearchTerm(option.label);
                setIsOpen(false);
              }}
            >
              {option.label}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

样式处理

为下拉组件添加基本CSS样式：

.dropdown {
  position: relative;
  width: 200px;
}

.dropdown-header {
  padding: 8px;
  border: 1px solid #ccc;
  cursor: pointer;
}

.dropdown-list {
  position: absolute;
  width: 100%;
  border: 1px solid #ccc;
  background: white;
  list-style: none;
  padding: 0;
  margin: 0;
  z-index: 1000;
}

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

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

.searchable-dropdown {
  position: relative;
}

.dropdown-options {
  position: absolute;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #ddd;
  background: white;
  list-style: none;
  padding: 0;
  margin: 0;
  z-index: 1000;
}

这些方法提供了不同复杂度的实现方案，从简单的原生选择框到功能丰富的自定义组件。根据项目需求选择合适的方法，第三方库如React-Select可以提供开箱即用的丰富功能，包括多选、异步加载等高级特性。