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方法去掉接口獲取接下來的數據即可；