antd2-select v1.0.3

antd2-select

select 组件，套用 antd 2 的 css，支持虚拟滚动，可以支撑在大量数据里面做选择的需求

• react 目标版本: v15 | v16 | v17
• antd 目标版本: v2

用例

选择框

<Select>
  {[1, 2, 3].map((item) => (
    <Option key={item} value={item}>
      {item}
    </Option>
  ))}
</Select>

虚拟滚动，选项数量 84e4

import { FixedSizeList as List } from 'react-window'

const Row = ({ index, style }) => (
  <Option key={index} value={index} disabled={index === 3} style={style}>
    {/* 123456 => '123,456' */}
    {(index + 1 + '')
      .split('')
      .reverse()
      .join('')
      .replace(/\d{3}/g, (match) => match + ',')
      .split('')
      .reverse()
      .join('')
      .replace(/^,/, '')}
  </Option>
)

<Select>
  <List height={250} itemCount={84e4} itemSize={31.6} width={300}>
    {Row}
  </List>
</Select>

注意事项

1. antd 的 js 和 css 是分开的，css 全局引入生效，所以组件可以直接套用 antd css 的 class
2. 组件分 Select 和 Option ，相互之间通过 React Content 进行交互，需要避免在嵌套组件间使用 Content Provider
3. 组件功能范围
   • 单选
   • 多选
   • 输入值，筛选数据范围
   • 输入值，自定义值变动触发的操作
   • placeholder
   • 清除选中项