Select 选择器

使用场景

代替原生 select 元素。

单选与多选

Select 支持以下两种方式来开启多选模式：

• 设置 multiple={true}
• 使用 <Select.Multi /> 组件

在 TypeScript 项目中，我们推荐使用组件来切换单选（Select.Single）和多选（Select.Multi），类型提示和检查将更准确。

示例

基本示例

请选择

noInline

const basicSelectDataSource = ['盒马', '淘宝', '天猫', { value: '飞猪', label: '飞猪', disabled: true }]; function Basic() { const [value, onChange] = useState(''); return <Select.Single value={value} onChange={onChange} hasClear hasArrow dataSource={basicSelectDataSource} />; } render(<Basic />)

const basicSelectDataSource = ['盒马', '淘宝', '天猫', { value: '飞猪', label: '飞猪', disabled: true }];

function Basic() {
  const [value, onChange] = useState('');

  return <Select.Single value={value} onChange={onChange} hasClear hasArrow dataSource={basicSelectDataSource} />;
}

render(<Basic />)

整行选择器

请选择

noInline

const basicSelectDataSource = ['盒马', '淘宝', '天猫', { value: '飞猪', label: '飞猪', disabled: true }]; function Fill() { return <Select.Single fill dataSource={basicSelectDataSource} />; } render(<Fill />)

const basicSelectDataSource = ['盒马', '淘宝', '天猫', { value: '飞猪', label: '飞猪', disabled: true }];

function Fill() {
  return <Select.Single fill dataSource={basicSelectDataSource} />;
}

render(<Fill />)

轻量选择

请选择

noInline

const basicSelectDataSource = ['盒马', '淘宝', '天猫', { value: '飞猪', label: '飞猪', disabled: true }]; function Minimum() { return <Select.Single shape="simple" dataSource={basicSelectDataSource} />; } render(<Minimum />)

const basicSelectDataSource = ['盒马', '淘宝', '天猫', { value: '飞猪', label: '飞猪', disabled: true }];

function Minimum() {
  return <Select.Single shape="simple" dataSource={basicSelectDataSource} />;
}

render(<Minimum />)

搜索

请选择

inline

function Search() { return ( <Select.Single showSearch dataSource={[ { value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2', disabled: true }, { value: '4', label: '阿里动物园' }, { value: '盒马', label: '盒马' }, { value: '淘宝', label: '淘宝' }, { value: '天猫', label: '天猫' }, { value: 'foo-4', label: '其他小朋友' }, { value: '2号动物园', label: '2号动物园' }, { value: '小脑虎', label: '小脑虎' }, { value: '小狮子', label: '小狮子' }, { value: '小企鹅', label: '小企鹅' }, { value: 'bar-4', label: '小朋友' }, { value: 'bar-4-小红红', label: '小红红' }, { value: 'bar-4-小蓝蓝', label: '小蓝蓝' }, { value: 'bar-4-小灰灰', label: '小灰灰' }, ]} /> ); }

function Search() {
  return (
    <Select.Single
      showSearch
      dataSource={[
        { value: '1', label: 'Option 1' },
        { value: '2', label: 'Option 2', disabled: true },
        { value: '4', label: '阿里动物园' },
        { value: '盒马', label: '盒马' },
        { value: '淘宝', label: '淘宝' },
        { value: '天猫', label: '天猫' },
        { value: 'foo-4', label: '其他小朋友' },
        { value: '2号动物园', label: '2号动物园' },
        { value: '小脑虎', label: '小脑虎' },
        { value: '小狮子', label: '小狮子' },
        { value: '小企鹅', label: '小企鹅' },
        { value: 'bar-4', label: '小朋友' },
        { value: 'bar-4-小红红', label: '小红红' },
        { value: 'bar-4-小蓝蓝', label: '小蓝蓝' },
        { value: 'bar-4-小灰灰', label: '小灰灰' },
      ]}
    />
  );
}

大数据量

请选择

inline

function BigData() { return <Select.Single dataSource={_.range(0, 20000).map((i) => `选项-${i + 1}`)} />; }

function BigData() {
  return <Select.Single dataSource={_.range(0, 20000).map((i) => `选项-${i + 1}`)} />;
}

错误状态

请选择

noInline

const basicSelectDataSource = ['盒马', '淘宝', '天猫', { value: '飞猪', label: '飞猪', disabled: true }]; function Status() { return <Select status="error" dataSource={basicSelectDataSource} />; } render(<Status />)

const basicSelectDataSource = ['盒马', '淘宝', '天猫', { value: '飞猪', label: '飞猪', disabled: true }];

function Status() {
  return <Select status="error" dataSource={basicSelectDataSource} />;
}

render(<Status />)

多选

请选择

inline

function Multiple() { return ( <Select.Multi style={{ width: 300 }} hasClear hasArrow dataSource={[ '盒马1', '淘宝1', '天猫1', { value: '飞猪1', label: '飞猪1', disabled: true }, '盒马2', '淘宝2', '天猫2', { value: '飞猪2', label: '飞猪2', disabled: true }, ]} /> ); }

function Multiple() {
  return (
    <Select.Multi
      style={{ width: 300 }}
      hasClear
      hasArrow
      dataSource={[
        '盒马1',
        '淘宝1',
        '天猫1',
        { value: '飞猪1', label: '飞猪1', disabled: true },
        '盒马2',
        '淘宝2',
        '天猫2',
        { value: '飞猪2', label: '飞猪2', disabled: true },
      ]}
    />
  );
}

API

Select.Single 与 Select.Multi 的区别仅在于 value 的类型不同（defaultValue, onChange 的类型也有相应的区别），其他 props 都相同。

字段	描述
defaultValue	string | string[]
value	string | string[]
onChange	(nextValue: string | string[], detail: {}) => void
multiple	boolean 是否多选
disabled	boolean 是否禁用
dataSource	Array<string | { label, value }> 数据源
外观
size	string 选择器尺寸
style	CSSProperties
className	string
placeholder	string 选择器值为空时，trigger 上的占位文本
hasArrow	boolean 是否有下拉箭头
fill	boolean 选择器宽度是否占满容器
shape	"simple" | "solid" 选择器形状
hasClear	boolean 是否有清除按钮
status	"normal" | "error" | "success" | "warning" 选择器状态
containerProps	HTMLAttributes<HTMLDivElement>
弹层
visible	boolean 弹层是否打开
onRequestClose	(reason?: any) => void
defaultVisible	boolean 弹层是否默认打开
onRequestOpen	(reason?: any) => void
autoWidth	boolean = true
autoHeight	boolean = true
autoScrollToFirstItemWhenOpen	boolean = true 选择器弹层被打开时，是否自动滚动到第一个选中的元素
autoCloseAfterSelect	boolean 选择元素时，是否自动关闭弹层。 单选模式下默认为 true，多选模式下默认为 false
popupProps	PopupProps 透传给 Popup 组件的 props
搜索
showSearch	boolean 是否支持搜索功能
searchValue	string 搜索关键字
defaultSearchValue	string 非受控用法，默认的搜索关键字
onSearch	(nextSearchValue: string, detail: { event: any; }) => void 关键字修改回调
notFoundContent	ReactNode 搜索结果为空时的展示内容

interface SelectItem {

value: string;

label?: React.ReactNode;

/** 是否禁用交互 */

disabled?: boolean;

}