当前位置：首页 > React

react实现下拉选择

2026-01-27 10:13:26React

React 实现下拉选择的方法

使用原生 HTML select 标签

在 React 中可以直接使用原生 HTML 的 select 标签结合 state 管理选中值：

import React, { useState } from 'react';

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

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

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

使用第三方库 react-select

react-select 是一个功能丰富的下拉选择组件库：

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

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

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

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

自定义下拉组件

如果需要完全自定义样式和行为，可以手动实现：

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

function CustomSelect({ 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="custom-select" ref={dropdownRef}>
      <div 
        className="select-header" 
        onClick={() => setIsOpen(!isOpen)}
      >
        {selectedOption ? selectedOption.label : '请选择'}
      </div>
      {isOpen && (
        <div className="select-options">
          {options.map(option => (
            <div
              key={option.value}
              className="select-option"
              onClick={() => {
                setSelectedOption(option);
                setIsOpen(false);
              }}
            >
              {option.label}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

多选下拉实现

react-select 也支持多选功能：

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

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

function MultiSelect() {
  const [selectedOptions, setSelectedOptions] = React.useState([]);

  return (
    <Select
      isMulti
      value={selectedOptions}
      onChange={setSelectedOptions}
      options={options}
    />
  );
}