antd you drop-down box to select add lazy load

 

 

Add drop-down box to select properties

dropdownRender={menu => (
                                <div>
                                  {menu}
                                  <div
                                    className="selectScroll"
                                    style={{ textAlign: 'center' }}
                                    onMouseDown={e => e.preventDefault()}
                                  >
                                    {
                                      selectLoading && // Load Status
                                        <Spin size="small" style={{ padding: '8px' }} />
                                    }
                                  </div>
                                </div>
                              )}
onFocus:
const index = document.getElementsByClassName('selectScroll').length;
      for (let i = 0; i < index; i++) {
        const node = document.getElementsByClassName('selectScroll')[i].previousElementSibling.children[0];
        node.onscroll = (e) => {
          const {pageTotal, selectLoading} = this.state; // total number of pieces of data, loading state
          const { clientHeight, scrollHeight, scrollTop } = e.target;
          if ((clientHeight + scrollTop === scrollHeight) && !selectLoading) {
            this.setState({
              selectCurPage: this.state.selectCurPage + 1, // number of pages plus a
            }, () => {
              if (Math.ceil (pageTotal / 15)> = this.state.selectCurPage) {// lazy loading a data loading 15
                // here to get the data through the interface
              }
            });
          }
        };
      }

Guess you like

Origin www.cnblogs.com/hamili/p/12168283.html