antd4 Select 支持分页加载及搜索_antd select分页

要结合使用select的 onPopupScroll和onSearch 事件，api详情可以参考 选择器 Select - Ant Design

1. 要支持分页，就是在下拉列表滚动到底的时候发起下一次请求，把请求数据push到现有的下拉框里面

2. 搜索功能的话也要接口提供数据，前端获取不到所有的数据

代码如下：

 const [options, changeOptions] = useState([])
  const [searchData, changeSearchData] = useState({
    pagination: {
      current: 1,
      pageSize: 10,
      total: 0
    },
    searchValue: ''
  })
  const { pagination: { current, pageSize, total }, searchValue } = searchData
  useEffect(() => {
    // 页码，及搜索值变化时，发请求
    const data = {
      current,
      pageSize,
      searchValue
    }
    request('/api/getList', data).then(res => {
      const { pagination, options } = res
      changeOptions(options)
      changeSearchData({ ...searchData, pagination })
    })
  }, [current, searchValue])
  const scrollEnd = (e) => {
    e.persist();
    const { target } = e;
    // 滚动 触底 看接口是否还有剩余的值没传过来
    if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
      if (current * pageSize < total) {
        changeSearchData({
          ...searchData,
          pagination: {
            ...searchData.pagination,
            current: current + 1
          },
        })
      }
    }
  }
  // 搜索条件变化时，current变成1，
  const searchDataset = (value) => {
    changeSearchData({
      pagination: {
        ...searchData.pagination,
        current: 1
      },
      searchValue: value
    })
  }
  return (
    <Select
      showSearch={true}
      options={options}
      // options的值 搜索需要filterOption return true 保证过滤的数据是从接口取过来的
      filterOption={() => { return true }} 
      onPopupScroll={scrollEnd}
      onSearch={debounce(searchDataset, 500)} // 防止频繁触发请求
    >
    </Select>
  )