Semi Design 中的 Select 选择器组件详解-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00921/article/details/148419049

Semi Design 中的 Select 选择器组件详解

semi-design 🚀A modern, comprehensive, flexible design system and React UI library. 🎨 Provide more than 2800+ Design Tokens, easy to build your design system. Make Semi Design to Any Design. 🧑🏻‍💻 Design to Code in one click 项目地址: https://gitcode.com/gh_mirrors/se/semi-design

什么是 Select 选择器

Select 选择器是 Semi Design 提供的一个功能强大的下拉选择组件，它允许用户从一个选项集合中选择一个或多个选项，并以清晰的方式呈现最终选择结果。这种组件在表单、筛选和配置界面中非常常见。

基本使用方法

引入组件

首先需要从 Semi Design 中引入 Select 组件：

import { Select } from '@douyinfe/semi-ui';
const Option = Select.Option;

基础示例

最简单的 Select 使用方式是为每个选项创建 Option 组件：

<Select defaultValue="douyin" style={{ width: 120 }}>
    <Select.Option value="douyin">抖音</Select.Option>
    <Select.Option value="ulikecam">轻颜相机</Select.Option>
    <Select.Option value="jianying" disabled>剪映</Select.Option>
    <Select.Option value="xigua">西瓜视频</Select.Option>
</Select>

每个 Option 必须包含 value 属性，而显示文本可以通过 children 或 label 属性指定。

高级功能

数组形式传入选项

除了逐个声明 Option 外，还可以通过 optionList 属性传入一个对象数组：

const list = [
    { value: 'douyin', label: '抖音', otherKey: 0 },
    { value: 'ulikecam', label: '轻颜相机', disabled: true, otherKey: 1 },
    { value: 'jianying', label: '剪映', otherKey: 2 },
    { value: 'toutiao', label: '新闻资讯', otherKey: 3 },
];
return <Select placeholder="请选择业务线" style={{ width: 180 }} optionList={list}></Select>;

多选功能

通过设置 multiple 属性可以启用多选模式：

<Select multiple style={{ width: '320px' }} defaultValue={['douyin', 'ulikecam']}>
    <Select.Option value="douyin">抖音</Select.Option>
    <Select.Option value="ulikecam">轻颜相机</Select.Option>
    <Select.Option value="jianying">剪映</Select.Option>
    <Select.Option value="xigua">西瓜视频</Select.Option>
</Select>

在多选模式下，还可以使用以下属性增强功能：

maxTagCount：限制显示的标签数量
ellipsisTrigger：对溢出标签做自适应处理
expandRestTagsOnClick：点击展开剩余标签
max：限制最大可选数量

分组选项

使用 OptGroup 可以对选项进行分组：

<Select placeholder="" style={{ width: 180 }} filter>
    <Select.OptGroup label="Asia">
        <Select.Option value="a-1">China</Select.Option>
        <Select.Option value="a-2">Korea</Select.Option>
    </Select.OptGroup>
    <Select.OptGroup label="Europe">
        <Select.Option value="b-1">Germany</Select.Option>
        <Select.Option value="b-2">France</Select.Option>
    </Select.OptGroup>
</Select>

样式与交互控制

尺寸控制

通过 size 属性可以控制选择器的大小：

<Select size="small">...</Select>
<Select size="default">...</Select>
<Select size="large">...</Select>

校验状态

通过 validateStatus 可以设置不同的校验状态样式：

<Select validateStatus="warning">...</Select>
<Select validateStatus="error">...</Select>

自定义前后缀

可以使用 prefix 和 suffix 添加前后缀内容：

<Select prefix={<IconVigoLogo />} suffix={<IconGift />}>...</Select>

高级用法

受控组件

通过 value 和 onChange 可以将 Select 作为受控组件使用：

const [value, setValue] = useState('xigua');
return (
    <Select value={value} onChange={setValue}>
        <Select.Option value="douyin">抖音</Select.Option>
        <Select.Option value="xigua">西瓜视频</Select.Option>
    </Select>
);

动态选项

动态更新选项时，建议使用受控模式：

const [options, setOptions] = useState([1, 2, 3, 4]);
return (
    <Select value={4}>
        {options.map(option => (
            <Select.Option value={option} key={option}>{option}</Select.Option>
        ))}
    </Select>
);

联动选择

实现两个 Select 之间的联动：

const [province, setProvince] = useState('四川');
const [city, setCity] = useState('成都');

const cities = {
    '四川': ['成都', '都江堰'],
    '广东': ['广州', '深圳', '东莞']
};

return (
    <>
        <Select value={province} onChange={setProvince}>
            <Select.Option value="四川">四川</Select.Option>
            <Select.Option value="广东">广东</Select.Option>
        </Select>
        <Select value={city} onChange={setCity}>
            {cities[province].map(c => (
                <Select.Option value={c} key={c}>{c}</Select.Option>
            ))}
        </Select>
    </>
);