reactjs - Ant Design - 选择 - 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 (); 

但这是一个不错的解决方案，我之前使用分页 api 来在 Select 组件中加载数据。