当前位置：首页 > React

react如何循环遍历下拉框

2026-01-26 01:45:09React

循环遍历下拉框的实现方法

在React中循环遍历下拉框通常涉及使用数组的map方法生成<option>元素。以下是几种常见场景的实现方式：

react如何循环遍历下拉框

使用静态数组生成选项

const options = ['Option 1', 'Option 2', 'Option 3'];

function Dropdown() {
  return (
    <select>
      {options.map((item, index) => (
        <option key={index} value={item}>
          {item}
        </option>
      ))}
    </select>
  );
}

动态数据（如API获取）

import { useState, useEffect } from 'react';

function Dropdown() {
  const [items, setItems] = useState([]);

  useEffect(() => {
    fetch('https://api.example.com/items')
      .then(res => res.json())
      .then(data => setItems(data));
  }, []);

  return (
    <select>
      {items.map(item => (
        <option key={item.id} value={item.value}>
          {item.label}
        </option>
      ))}
    </select>
  );
}

对象数组处理

当数据为对象数组时，可以指定具体属性作为值和显示文本：

const cities = [
  { id: 1, name: 'New York' },
  { id: 2, name: 'London' }
];

function Dropdown() {
  return (
    <select>
      {cities.map(city => (
        <option key={city.id} value={city.id}>
          {city.name}
        </option>
      ))}
    </select>
  );
}

添加默认选项

<select>
  <option value="">Select an option</option>
  {options.map((option) => (
    <option key={option} value={option}>
      {option}
    </option>
  ))}
</select>

受控组件实现

结合状态管理实现双向绑定：

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

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

  return (
    <select value={selectedValue} onChange={handleChange}>
      {options.map(option => (
        <option key={option} value={option}>
          {option}
        </option>
      ))}
    </select>
  );
}