Select 选择器

带有错误展示和重试功能的下拉选择器组件。

🎯 查看交互演示

功能特性

• ✅ 基础下拉选择功能
• ✅ 错误状态展示
• ✅ 重试功能（支持异步）
• ✅ 加载状态
• ✅ 禁用状态
• ✅ 键盘导航支持
• ✅ 无障碍支持 (ARIA)

基础用法

import Select from './select';

const options = [
  { value: '1', label: '选项一' },
  { value: '2', label: '选项二' },
  { value: '3', label: '选项三' },
];

function Demo() {
  const [value, setValue] = useState('');

  return <Select options={options} value={value} onChange={setValue} placeholder="请选择" />;
}

错误状态与重试

当数据加载失败时，组件会显示错误信息和重试按钮：

import Select from './select';

function Demo() {
  const [value, setValue] = useState('');
  const [options, setOptions] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const fetchOptions = async () => {
    setLoading(true);
    setError(null);
    try {
      const res = await fetch('/api/options');
      if (!res.ok) throw new Error('加载失败');
      const data = await res.json();
      setOptions(data);
    } catch (err) {
      setError(err.message || '加载选项失败，请重试');
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchOptions();
  }, []);

  return (
    <Select
      options={options}
      value={value}
      onChange={setValue}
      loading={loading}
      error={error}
      onRetry={fetchOptions}
      placeholder="请选择"
    />
  );
}

禁用选项

const options = [
  { value: '1', label: '选项一' },
  { value: '2', label: '选项二（禁用）', disabled: true },
  { value: '3', label: '选项三' },
];

<Select options={options} value={value} onChange={setValue} />;

禁用组件

<Select options={options} value={value} onChange={setValue} disabled />

API

Props

属性	说明	类型	默认值
options	选项列表	SelectOption[]	[]
value	当前选中值	string | number	-
placeholder	占位文本	string	'请选择'
disabled	是否禁用	boolean	false
loading	是否加载中	boolean	false
error	错误信息	string | null	null
onChange	值变化回调	(value: string | number) => void	-
onRetry	重试回调	() => void | Promise<void>	-
style	自定义样式	React.CSSProperties	-
className	自定义类名	string	-

SelectOption

属性	说明	类型	必填
value	选项值	string | number	是
label	选项显示文本	string	是
disabled	是否禁用	boolean	否

键盘操作

按键	说明
Enter / Space	打开/关闭下拉菜单
Escape	关闭下拉菜单
↑ / ↓	在选项间导航

设计说明

错误处理

组件提供了优雅的错误处理机制：

1. 视觉反馈：错误状态下输入框边框变红
2. 错误信息：在组件下方显示错误详情
3. 重试按钮：提供重试功能，支持异步操作
4. 加载状态：重试时显示加载动画

可访问性

• 使用 ARIA 属性标记组件状态
• 支持完整的键盘导航
• 禁用状态正确处理焦点