select下拉加载

Select大数据量优化，针对 antd3x Select
https://blog.csdn.net/liuyuhua666/article/details/103703478

下拉刷新组件
参考 https://www.cnblogs.com/zling-gnilz/p/11064113.html
实现效果：https://lrhvt.csb.app ``jsx const SearchInput = () => { const arr = [{ label: "test text", key: "test" }]; for (let i = 0; i < 500; i++) { arr.push({ label:label-${i}`, key: i, }); } return ; };

<a name="SLkOe"></a>
## onPopupScroll
1. select组件下，onPopupScroll的API这样子可以自定义模拟 scrollToEnd
2. 参考：[https://github.com/ant-design/ant-design/issues/12406#issuecomment-424968753](https://github.com/ant-design/ant-design/issues/12406#issuecomment-424968753)
   1. Select 组件提供 onScrollToEnd API,这样可以用来支持无限分页滚动
```jsx
onPopupScroll = e => {
    e.persist(); 
    let target = e.target;
    if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
      // scrollToEnd, do something!!!
    }
  };

select下拉刷新组件

import React from "react";
import { Select } from "antd";
import PropTypes from "prop-types";
const { Option } = Select;
export default class CustomSelect extends React.Component {
  static propTypes = {
    dataSource: PropTypes.arrayOf(
      PropTypes.shape({
        key: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
          .isRequired,
        label: PropTypes.string
      })
    ),
    onChange: PropTypes.func
  };
  static defaultProps = {
    dataSource: []
  };
  constructor(props) {
    super(props);
    this.state = {
      page: 1,
      showArr: props.dataSource
    };
    this.pageSize = 20;
    this.list = [];
  }
  pageSt = 0;
  handleChange = v => {
    const { onChange, dataSource } = this.props;
    onChange && onChange(v);
    this.setState({ page: 1, showArr: dataSource });
  };
  handlePopupScroll = e => {
    const { page, showArr } = this.state;
    e.persist();
    const { target } = e;
    const st = target.scrollTop;
    if (st === 0 && this.pageSt) {
      target.scrollTop = this.pageSt;
    }
    if (
      st + target.offsetHeight + 2 >= target.scrollHeight &&
      this.list.length < showArr.length
    ) {
      this.setState({ page: page + 1 });
      this.pageSt = st;
    } else {
      this.pageSt = 0;
    }
  };
  handleFocus = () => {
    this.prevScroll = 0;
    const { dataSource } = this.props;
    this.setState({ page: 1, showArr: dataSource });
  };
  handleSearch = v => {
    const { dataSource } = this.props;
    v = v || "";
    const filterWord = v.trim().toLowerCase();
    const showArr = dataSource.filter(item =>
      item.label.toLowerCase().includes(filterWord)
    );
    this.setState({ page: 1, showArr });
  };
  render() {
    const { dataSource, ...rest } = this.props;
    const { showArr, page } = this.state;
    if (showArr.length > this.pageSize) {
      this.list = showArr.slice(0, this.pageSize * page);
      // 当value是外部赋值的时候，判断value是否在当前的list中，如果不在，单独加进来
      if (this.props.value != null) {
        let valueObj = this.list.find(item => item.key === this.props.value);
        if (!valueObj) {
          valueObj = dataSource.find(item => item.key === this.props.value);
          valueObj && this.list.unshift(valueObj);
        }
      }
    } else {
      this.list = showArr;
    }
    return (
      <Select
        {...rest}
        onChange={this.handleChange}
        filterOption={false}
        onPopupScroll={this.handlePopupScroll}
        onFocus={this.handleFocus}
        onSearch={this.handleSearch}
      >
        {this.list.map(opt => (
          <Option key={opt.key} value={opt.key}>
            {opt.label || opt.key}
          </Option>
        ))}
      </Select>
    );
  }
}