Ant Design - выберите - OnPopupScroll - React. js - PullRequest
Новая
       53

Ant Design - выберите - OnPopupScroll - React. js

0 голосов
/ 29 апреля 2020 

                                    <Select
                                      showSearch
                                      filterOption={(input, option) => {
                                        if (option.props.children != undefined) {
                                          return (
                                            option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                          )
                                        }
                                      }
                                      }
                                      name="user"
                                      placeholder="Select User"
                                      id="user"
                                      onChange={e =>
                                        this.handleChange("user", e)
                                      }
                                      onPopupScroll = {this.loadMore}
                                      className="customSelectTemplate"
                                      disabled={this.state.editEnabled}
                                    >
                                      <Option value="">Select</Option>
                                      {this.state.userList &&
                                        this.state.userList.map(userList => (
                                          userList && userList.userNumber != null &&
                                          <Option value={userList.userNumber}>
                                            {userList.name}
                                          </Option>
                                        ))}
                                        {this.state.loadingState == true ? 
                                        <Option value="">Loading .....</Option>
                                        : ""}
                                    </Select>

Я создал страницу с использованием реагирования. Мне нужно реализовать бесконечную прокрутку в выпадающем списке муравьев. Поэтому я использую функцию onPopupScroll в antd select для вызова API, чтобы загрузить больше данных в раскрывающийся список. Но я сталкиваюсь с проблемой производительности в выпадающем списке. Полоса прокрутки не работает должным образом. Я не могу перетащить полосу прокрутки до конца параметров. Это очень медленно. Кто-нибудь сталкивался с этими проблемами? Как я могу это исправить? 

loadMore = ( e) => {
    this.setState({ loadingState: true });
    e.persist (); 
     const {target} = e; 
     if (target.scrollTop + target.offsetHeight === target.scrollHeight) { 
       // API call (to load more data..........)
    }
   
  }
...