React中Select下拉框值选择与标签添加功能实现求助

核心问题分析 #

你的问题集中在选中状态管理逻辑错误和UI渲染逻辑缺失：

• onChange事件未正确将选中项追加到选中列表，而是直接覆盖或处理逻辑错误，导致控制台异常
• 未基于选中状态数组渲染对应的可删除Badge标签

完整实现代码 #

假设你的listJobCategories数据结构为：[{id: number, name: string}, ...]，以下是修复后的完整代码：

状态定义 #

import { useState, useEffect } from 'react';
// 若使用Material-UI，导入对应组件
import { Select, MenuItem, InputLabel, FormControl } from '@mui/material';

function CategorySelector() {
  // 从API获取的分类列表
  const [listJobCategories, setListJobCategories] = useState([]);
  // 存储已选中的分类数组
  const [selectedCategories, setSelectedCategories] = useState([]);

  // 模拟API请求获取分类列表
  useEffect(() => {
    const fetchCategories = async () => {
      // 替换为你的实际API请求逻辑
      const res = await fetch('/api/job-categories');
      const data = await res.json();
      setListJobCategories(data);
    };
    fetchCategories();
  }, []);

事件处理函数 #

// 处理下拉选择事件
  const handleSelectChange = (event) => {
    const selectedId = Number(event.target.value);
    // 匹配选中的分类项
    const selectedCategory = listJobCategories.find(item => item.id === selectedId);
    
    // 避免重复添加相同分类
    if (!selectedCategories.some(item => item.id === selectedId)) {
      setSelectedCategories(prev => [...prev, selectedCategory]);
    }
    // 重置下拉框选中状态，方便再次选择
    event.target.value = '';
  };

  // 处理Badge删除事件
  const handleRemoveCategory = (categoryId) => {
    setSelectedCategories(prev => prev.filter(item => item.id !== categoryId));
  };

UI渲染 #

return (
    <div>
      {/* 已选中的Badge标签区域 */}
      <div style={{ marginBottom: '12px' }}>
        {selectedCategories.map(category => (
          <span 
            key={category.id} 
            style={{
              display: 'inline-block',
              backgroundColor: '#f0f0f0',
              padding: '4px 10px',
              borderRadius: '16px',
              marginRight: '8px',
              marginBottom: '8px',
              fontSize: '14px'
            }}
          >
            {category.name}
            <button 
              onClick={() => handleRemoveCategory(category.id)}
              style={{
                background: 'none',
                border: 'none',
                marginLeft: '8px',
                cursor: 'pointer',
                fontSize: '16px',
                padding: '0',
                color: '#666'
              }}
            >
              ×
            </button>
          </span>
        ))}
      </div>

      {/* 下拉选择框 */}
      <FormControl style={{ minWidth: 200 }}>
        <InputLabel>选择分类</InputLabel>
        <Select
          label="选择分类"
          onChange={handleSelectChange}
        >
          {listJobCategories.map(category => (
            <MenuItem 
              key={category.id} 
              value={category.id}
              {/* 可选：禁用已选中的分类，防止重复选择 */}
              disabled={selectedCategories.some(item => item.id === category.id)}
            >
              {category.name}
            </MenuItem>
          ))}
        </Select>
      </FormControl>
    </div>
  );
}

export default CategorySelector;

关键修复点说明 #

1. 状态管理：用数组selectedCategories存储所有选中项，避免单值状态的覆盖问题
2. 去重逻辑：在handleSelectChange中通过some判断是否已存在该分类，防止重复添加
3. Badge渲染：遍历selectedCategories数组，动态生成带删除按钮的Badge标签
4. 删除逻辑：通过filter方法从选中数组中移除对应ID的分类，更新状态
5. 下拉框优化：选择后重置下拉框选中值，或禁用已选项，提升用户体验

内容的提问来源于stack exchange，提问作者Muhammad Haekal