React中实现select下拉框选中项与选项文本不同显示

原生HTML的<select>无法实现展开/收起时显示不同文本（因为<option>的文本是固定的），在React里可以通过自定义下拉组件完全控制显示逻辑，满足你的需求。

实现示例 #

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

const CustomSelect = () => {
  const options = [{name: "John Doe", value: "john", displayName: "John"}];
  const [selectedValue, setSelectedValue] = useState(null);
  const [isOpen, setIsOpen] = useState(false);
  const selectRef = useRef(null);

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

  // 获取选中项的displayName，无选中时显示占位文本
  const getDisplayText = () => {
    if (!selectedValue) return '请选择';
    return options.find(opt => opt.value === selectedValue).displayName;
  };

  return (
    <div ref={selectRef} style={{ position: 'relative', width: 200 }}>
      {/* 模拟原生select的触发栏 */}
      <div 
        onClick={() => setIsOpen(!isOpen)}
        style={{ 
          padding: '8px 12px', 
          border: '1px solid #ccc', 
          borderRadius: 4,
          cursor: 'pointer',
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center'
        }}
      >
        {getDisplayText()}
        <span>{isOpen ? '▲' : '▼'}</span>
      </div>

      {/* 下拉选项列表 */}
      {isOpen && (
        <div 
          style={{ 
            position: 'absolute', 
            top: '100%', 
            left: 0, 
            right: 0, 
            border: '1px solid #ccc', 
            borderTop: 'none',
            borderRadius: '0 0 4px 4px',
            background: '#fff',
            zIndex: 100
          }}
        >
          {options.map(opt => (
            <div
              key={opt.value}
              onClick={() => {
                setSelectedValue(opt.value);
                setIsOpen(false);
              }}
              style={{ 
                padding: '8px 12px', 
                cursor: 'pointer',
                backgroundColor: selectedValue === opt.value ? '#f0f0f0' : 'transparent'
              }}
            >
              {opt.name}
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

export default CustomSelect;

核心逻辑说明 #

1. 状态控制：用selectedValue记录选中项的value，isOpen控制下拉列表的展开/收起状态。
2. 自定义触发区域：用<div>模拟原生select的外观，点击时切换展开状态，显示选中项的displayName。
3. 下拉列表渲染：展开时显示所有选项的name字段，点击选项后更新选中状态并自动收起列表。
4. 外部点击关闭：通过useRef监听DOM范围，实现点击下拉框外部时自动收起，贴近原生交互体验。

可扩展优化点 #

• 添加键盘导航（上下箭头切换选项、回车选中）
• 封装成通用组件，支持传入options、默认值、占位文本等props
• 自定义样式适配项目设计规范

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