select实现下拉加载的效果（接口分页）

为select增加onPopupScroll事件；见下示例；

<Select
            suffixIcon={<Icon type="caret-down" style={{ transform: 'scale(0.7)' }} />}
            showSearch

            ref={node => (this.input = node)}

            onSearch={debounce(this.handleSearchDepartmentEvent, 800)}

            onFocus={this.handleSearchDepartmentEvent}

            onPopupScroll={this.handlePopupScroll} //下拉加载的事件

            onChange={this.handleSearchChange}

            dropdownClassName="deptDrop" //给下拉框设置最大高度达到滚动效果

            filterOption={false}

            optionLabelProp="label"

            dropdownMatchSelectWidth={false}

            defaultActiveFirstOption={false}
          />

　　下拉加载绑定的事件见如下代码：

 handlePopupScroll = (e) => {
    let { pageNum, pages, pageSize, scrollFlag } = this.state;
    console.log(1)
    e.persist();//保留对事件的引用
    const { target } = e;
    const st = target.scrollTop;
    if (scrollFlag) {
      console.log(2)
      if (st + target.offsetHeight + 2 >= target.scrollHeight) {
        console.log(3)
        pageNum = pageNum + 1
        if (pageNum <= pages) {
          console.log(4)
          this.setState({
            scrollFlag: false,
            pageNum
          }, () => {
            console.log(5)
            this.deptGetData(pageNum, pageSize)
          })
        }
      }
    }
  }

其中 pageNum, pages, pageSize, scrollFlag保留在状态值中；deptGetData方法去掉接口获取接下来的数据即可；