当前位置：首页 > React

react中如何做下拉选项

2026-01-25 22:43:54React

使用原生HTML的select标签

在React中可以直接使用HTML的<select>和<option>标签创建下拉选项。通过value和onChange属性实现受控组件，管理选中状态。

import { useState } from 'react';

function Dropdown() {
  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库。安装后通过options和onChange配置下拉选项。

npm install react-select

import Select from 'react-select';
import { useState } from 'react';

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

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

  return (
    <Select
      value={selectedOption}
      onChange={setSelectedOption}
      options={options}
      placeholder="请选择"
    />
  );
}

自定义下拉组件

通过状态管理展开/收起状态，结合CSS实现自定义样式。

import { useState } from 'react';
import './Dropdown.css'; // 自定义样式

function CustomDropdown() {
  const [isOpen, setIsOpen] = useState(false);
  const [selectedItem, setSelectedItem] = useState('请选择');

  const items = ['选项1', '选项2', '选项3'];

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

  const handleSelect = (item) => {
    setSelectedItem(item);
    setIsOpen(false);
  };

  return (
    <div className="dropdown">
      <button className="dropdown-toggle" onClick={toggleDropdown}>
        {selectedItem}
      </button>
      {isOpen && (
        <ul className="dropdown-menu">
          {items.map((item) => (
            <li key={item} onClick={() => handleSelect(item)}>
              {item}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

动态生成下拉选项

通过遍历数据动态生成<option>，适用于选项内容来自API或动态数据的情况。

import { useState, useEffect } from 'react';

function DynamicDropdown() {
  const [options, setOptions] = useState([]);
  const [selectedValue, setSelectedValue] = useState('');

  useEffect(() => {
    // 模拟API请求
    const fetchOptions = async () => {
      const mockData = [
        { id: 1, name: '选项1' },
        { id: 2, name: '选项2' }
      ];
      setOptions(mockData);
    };
    fetchOptions();
  }, []);

  return (
    <select
      value={selectedValue}
      onChange={(e) => setSelectedValue(e.target.value)}
    >
      <option value="">请选择</option>
      {options.map((option) => (
        <option key={option.id} value={option.id}>
          {option.name}
        </option>
      ))}
    </select>
  );
}