React+JS待办列表：实现下拉框未展开仅显示选中项图标

原生<select>组件无法区分收起/展开状态的不同显示逻辑，要实现「收起显示图标，展开显示图标+文字」的需求，最直接的方式是自定义下拉组件。以下是基于React+JS的落地实现：

核心逻辑 #

• 用按钮模拟下拉触发区，收起状态仅渲染选中项的图标
• 用isOpen状态控制下拉列表的显示/隐藏
• 展开列表时，渲染所有带图标+文字的选项
• 点击选项后更新选中状态并自动收起下拉

完整代码实现 #

假设你的items数组结构如下（可根据实际结构调整）：

const items = [
  { value: "todo", label: "待办", icon: "📝" },
  { value: "in-progress", label: "进行中", icon: "⏳" },
  { value: "done", label: "已完成", icon: "✅" }
];

自定义TypeSelector组件：

import { useState, useEffect, useRef } from "react";

const TypeSelector = ({ initialValue, onChange }) => {
  const [selectedValue, setSelectedValue] = useState(initialValue);
  const [isOpen, setIsOpen] = useState(false);
  const dropdownRef = useRef(null);

  // 点击外部区域关闭下拉
  useEffect(() => {
    const handleClickOutside = (e) => {
      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
        setIsOpen(false);
      }
    };
    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, []);

  // 获取当前选中项的信息
  const selectedItem = items.find(item => item.value === selectedValue);

  // 处理选项点击事件
  const handleOptionClick = (value) => {
    setSelectedValue(value);
    setIsOpen(false);
    onChange && onChange(value);
  };

  return (
    <div className="type-selector" ref={dropdownRef}>
      {/* 下拉触发按钮 */}
      <button 
        className="selector-trigger"
        onClick={() => setIsOpen(!isOpen)}
        aria-expanded={isOpen}
      >
        {selectedItem?.icon}
      </button>

      {/* 下拉选项列表 */}
      {isOpen && (
        <ul className="selector-options">
          {items.map(item => (
            <li 
              key={item.value}
              className={`option-item ${item.value === selectedValue ? "active" : ""}`}
              onClick={() => handleOptionClick(item.value)}
            >
              <span>{item.icon}</span>
              <span>{item.label}</span>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default TypeSelector;

基础样式补充（可选） #

为了让组件更贴近原生下拉框的交互体验，添加以下CSS：

.type-selector {
  position: relative;
  display: inline-block;
}

.selector-trigger {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: white;
  cursor: pointer;
  font-size: 18px;
}

.selector-options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.option-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
}

.option-item:hover, .option-item.active {
  background-color: #f5f5f5;
}

组件使用示例 #

// 在父组件中调用
<TypeSelector 
  initialValue="todo"
  onChange={(value) => console.log("选中状态：", value)}
/>

方案优势 #

• 完全自定义显示逻辑，精准匹配需求
• 交互逻辑可灵活扩展（比如添加键盘导航、搜索筛选等）
• 样式可根据项目UI风格自由定制

内容的提问来源于stack exchange，提问作者Arjen Bos