Select

选择器

Import: import { Select } from '@kubed/components;'

Source: View source code

Docs: Edit this page

npm: @kubed/components

Documentation

Component Props

何时使用

选择器常用在表单中，以帮助用户快速输入表单内容，选择器适合有固定选项的数据录入，或者大佬数据需要借助选择器筛选以输入表单内容。

基础用法

通过 option 属性来设置 Select 组件的选项。通过 defaultValue 属性设置 Select 组件的默认值。通过 disabled 属性来禁用 Select 组件。通过 loading 属性设置 Select 组件的加载中状态。通过 allowClear 属性设置选中内容是否可清除。

() => {
  const { Option } = Select;
  return (
  <>
     <Select style={{ width: '180px' }} placeholder="请选择" allowClear>
       <Option value="China">按 CPU 平均负载排行</Option>
       <Option value="USA">按内存用量排行</Option>
       <Option value="Russian">按磁盘用量排行</Option>
       <Option value="France">按磁盘用量排行2</Option>
     </Select>
     <Select defaultValue="China" style={{ width: '120px', marginLeft:'20px'}} disabled>
       <Option value="China">China</Option>
     </Select>
     <Select defaultValue="China" style={{ width: '120px',marginLeft:'20px'}} loading>
       <Option value="china">China</Option>
     </Select>
     <Select defaultValue="China" style={{ width: '120px', marginLeft:'20px'}} allowClear>
        <Option value="china">China</Option>
     </Select>
   </>
  )
}

1
() => {
2
  const { Option } = Select;
3
  return (
4
  <>
5
     <Select style={{ width: '180px' }} placeholder="请选择" allowClear>
6
       <Option value="China">按 CPU 平均负载排行</Option>
7
       <Option value="USA">按内存用量排行</Option>
8
       <Option value="Russian">按磁盘用量排行</Option>
9
       <Option value="France">按磁盘用量排行2</Option>
10
     </Select>
11
     <Select defaultValue="China" style={{ width: '120px', marginLeft:'20px'}} disabled>
12
       <Option value="China">China</Option>
13
     </Select>
14
     <Select defaultValue="China" style={{ width: '120px',marginLeft:'20px'}} loading>
15
       <Option value="china">China</Option>
16
     </Select>
17
     <Select defaultValue="China" style={{ width: '120px', marginLeft:'20px'}} allowClear>
18
        <Option value="china">China</Option>
19
     </Select>
20
   </>
21
  )
22
}
23

带搜索框

展开后可对选项进行搜索。通过 showSearch 设置显示搜索按钮。

() => (
  <Select allowClear style={{ width: '120px' }} placeholder="请选择" showSearch>
    <Select.Option value="CentOs-5.8">CentOs 5.8 32bit</Select.Option>
    <Select.Option value="CentOs-6.6">CentOs 6.6 64bit</Select.Option>
    <Select.Option value="CentOs-7">CentOs 7 64bit</Select.Option>
  </Select>
)

1
() => (
2
  <Select allowClear style={{ width: '120px' }} placeholder="请选择" showSearch>
3
    <Select.Option value="CentOs-5.8">CentOs 5.8 32bit</Select.Option>
4
    <Select.Option value="CentOs-6.6">CentOs 6.6 64bit</Select.Option>
5
    <Select.Option value="CentOs-7">CentOs 7 64bit</Select.Option>
6
  </Select>
7
)
8

多选

多选，从已有条目中选择。通过 mode 属性设置为 multiple 可以将 Select 组件变为多选。

() => (
  <Select style={{ width: '300px' }} placeholder="请选择" allowClear mode="multiple" showArrow>
    <Select.Option value="CPU">按 CPU 平均负载排行</Select.Option>
    <Select.Option value="RAM">按内存用量排行</Select.Option>
    <Select.Option value="DISK">按磁盘用量排行</Select.Option>
  </Select>
)

1
() => (
2
  <Select style={{ width: '300px' }} placeholder="请选择" allowClear mode="multiple" showArrow>
3
    <Select.Option value="CPU">按 CPU 平均负载排行</Select.Option>
4
    <Select.Option value="RAM">按内存用量排行</Select.Option>
5
    <Select.Option value="DISK">按磁盘用量排行</Select.Option>
6
  </Select>
7
)
8

() => {
 const children = [];
 for (let i = 10; i < 36; i++) {
   children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
 }

 function handleChange(value) {
   console.log(`selected ${value}`);
 }
 return (
    <Select mode="tags" style={{ width: '100%'}} placeholder="Tags mode" onChange={handleChange}>
      {children}
    </Select>
  )
}

1
() => {
2
 const children = [];
3
 for (let i = 10; i < 36; i++) {
4
   children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
5
 }
6

7
 function handleChange(value) {
8
   console.log(`selected ${value}`);
9
 }
10
 return (
11
    <Select mode="tags" style={{ width: '100%'}} placeholder="Tags mode" onChange={handleChange}>
12
      {children}
13
    </Select>
14
  )
15
}
16

分组

通过 OptGroup 组件进行选项分组。

() => {
  const { OptGroup } = Select;
  function handleChange(value){
    console.log(`selected ${value}`);
  }
  return (
     <Select defaultValue="JS" style={{ width: 200 }} onChange={handleChange}>
      <OptGroup label="JavaScript">
        <Option value="React">React</Option>
        <Option value="Vue">Vue</Option>
      </OptGroup>
      <OptGroup label="node">
        <Option value="koa">koa</Option>
      </OptGroup>
    </Select>
  )
}

1
() => {
2
  const { OptGroup } = Select;
3
  function handleChange(value){
4
    console.log(`selected ${value}`);
5
  }
6
  return (
7
     <Select defaultValue="JS" style={{ width: 200 }} onChange={handleChange}>
8
      <OptGroup label="JavaScript">
9
        <Option value="React">React</Option>
10
        <Option value="Vue">Vue</Option>
11
      </OptGroup>
12
      <OptGroup label="node">
13
        <Option value="koa">koa</Option>
14
      </OptGroup>
15
    </Select>
16
  )
17
}
18

自动分词

只在 tags 和 multiple 模式下可用。通过 tokenSeparator 设置分词分隔符。

() => {
  const children = [];
  for (let i = 10; i < 36; i++) {
    children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
  }
  function handleChange(value){
    console.log(`selected ${value}`);
  }
  return (
    <Select
      mode="tags"
      style={{ width: 200 }}
      onChange={handleChange}
      tokenSeparator={[',']}>
      {children}
    </Select>
  )
}

1
() => {
2
  const children = [];
3
  for (let i = 10; i < 36; i++) {
4
    children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
5
  }
6
  function handleChange(value){
7
    console.log(`selected ${value}`);
8
  }
9
  return (
10
    <Select
11
      mode="tags"
12
      style={{ width: 200 }}
13
      onChange={handleChange}
14
      tokenSeparator={[',']}>
15
      {children}
16
    </Select>
17
  )
18
}
19

自定义选择标签

允许自定义选择标签的样式。

() => {
  const options=[{value:'gold'},{value:'lime'},{value:'green'}]
  function tagRender(props){
     const {label,value,closable,onClose} = props;
     const onPreventMouseDown = event => {
        event.preventDefault();
        event.stopPropagation();
      };
     return (
        <Tag
          color={value}
          onMouseDown={onPreventMouseDown}
          closable={closable}
          onClose={onClose}
          style={{ marginRight: 3 }}
        >
          {label}
        </Tag>
     );
  }
  return (
    <Select
      mode="multiple"
      showArrow
      tagRender={tagRender}
      defaultValue={['gold','cyan']}
      style={{ width: '100%'}}
      options={options}
    />
  )
}

1
() => {
2
  const options=[{value:'gold'},{value:'lime'},{value:'green'}]
3
  function tagRender(props){
4
     const {label,value,closable,onClose} = props;
5
     const onPreventMouseDown = event => {
6
        event.preventDefault();
7
        event.stopPropagation();
8
      };
9
     return (
10
        <Tag
11
          color={value}
12
          onMouseDown={onPreventMouseDown}
13
          closable={closable}
14
          onClose={onClose}
15
          style={{ marginRight: 3 }}
16
        >
17
          {label}
18
        </Tag>
19
     );
20
  }
21
  return (
22
    <Select
23
      mode="multiple"
24
      showArrow
25
      tagRender={tagRender}
26
      defaultValue={['gold','cyan']}
27
      style={{ width: '100%'}}
28
      options={options}
29
    />
30
  )
31
}
32

隐藏以选择选项

隐藏下拉列表中已选择的选项。

() => {
  const OPTIONS = ['Apples', 'Nails', 'Bananas', 'Helicopters'];
  const [selectedItems, setSelectedItems] = React.useState([]);
  function handleChange(selectedItems){
    setSelectedItems(selectedItems)
  }
  const filteredOptions = OPTIONS.filter(o => !selectedItems.includes(o));
  return (
    <Select
      mode="multiple"
      placeholder="Insert are removed"
      value={selectedItems}
      onChange={handleChange}
      style={{width:'100%'}}
    >
    {filteredOptions.map(item => (
              <Select.Option key={item} value={item}>
                {item}
              </Select.Option>
            ))}
    </Select>
  )
}

1
() => {
2
  const OPTIONS = ['Apples', 'Nails', 'Bananas', 'Helicopters'];
3
  const [selectedItems, setSelectedItems] = React.useState([]);
4
  function handleChange(selectedItems){
5
    setSelectedItems(selectedItems)
6
  }
7
  const filteredOptions = OPTIONS.filter(o => !selectedItems.includes(o));
8
  return (
9
    <Select
10
      mode="multiple"
11
      placeholder="Insert are removed"
12
      value={selectedItems}
13
      onChange={handleChange}
14
      style={{width:'100%'}}
15
    >
16
    {filteredOptions.map(item => (
17
              <Select.Option key={item} value={item}>
18
                {item}
19
              </Select.Option>
20
            ))}
21
    </Select>
22
  )
23
}
24

定制回填内容

通过 optionLabelProp 属性指定回填到选择框的 Option 属性。

() => {
  function handleChange(value){
    console.log(`selected ${value}`);
  }
  return (
    <Select
      mode="multiple"
      style={{ width:'100%'}}
      placeholder="select one country"
      defaultValue={['china']}
      onChange={handleChange}
      optionLabelProp="label"
    >
       <Option value="china" label="China">
         <div className="demo-option-label-item">
            <span role="img" aria-label="China">
                🇨🇳
              </span>
              China (中国)
            </div>
       </Option>
       <Option value="usa" label="USA">
          <div className="demo-option-label-item">
            <span role="img" aria-label="USA">
               🇺🇸
            </span>
            USA (美国)
          </div>
       </Option>
       <Option value="japan" label="Japan">
          <div className="demo-option-label-item">
             <span role="img" aria-label="Japan">
                🇯🇵
             </span>
                Japan (日本)
             </div>
       </Option>
       <Option value="korea" label="Korea">
          <div className="demo-option-label-item">
             <span role="img" aria-label="Korea">
                🇰🇷
             </span>
             Korea (韩国)
          </div>
       </Option>
    </Select>
  )
}

1
() => {
2
  function handleChange(value){
3
    console.log(`selected ${value}`);
4
  }
5
  return (
6
    <Select
7
      mode="multiple"
8
      style={{ width:'100%'}}
9
      placeholder="select one country"
10
      defaultValue={['china']}
11
      onChange={handleChange}
12
      optionLabelProp="label"
13
    >
14
       <Option value="china" label="China">
15
         <div className="demo-option-label-item">
16
            <span role="img" aria-label="China">
17
                🇨🇳
18
              </span>
19
              China (中国)
20
            </div>
21
       </Option>
22
       <Option value="usa" label="USA">
23
          <div className="demo-option-label-item">
24
            <span role="img" aria-label="USA">
25
               🇺🇸
26
            </span>
27
            USA (美国)
28
          </div>
29
       </Option>
30
       <Option value="japan" label="Japan">
31
          <div className="demo-option-label-item">
32
             <span role="img" aria-label="Japan">
33
                🇯🇵
34
             </span>
35
                Japan (日本)
36
             </div>
37
       </Option>
38
       <Option value="korea" label="Korea">
39
          <div className="demo-option-label-item">
40
             <span role="img" aria-label="Korea">
41
                🇰🇷
42
             </span>
43
             Korea (韩国)
44
          </div>
45
       </Option>
46
    </Select>
47
  )
48
}
49

布局

常规

信息录入

数据展示

反馈