蚂蚁设计-选择-OnPopupScroll-React.js

Question

                                    <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>

我使用react设计了一个页面。我需要在ant下拉菜单中实现无限滚动。因此，我正在使用antd select的onPopupScroll函数来调用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..........)
    }
   
  }

Answer 1

我不知道你为什么要用这个

e.persist (); 

但是here是一个不错的解决方案，我之前使用过带有分页的api来将数据加载到Select组件中。