Javascript 如何在antd select上添加分页？因为从接口获取数据是巨大的。所以我想实现分页

如何在选择Antd时添加分页？因为从接口获取数据是巨大的。所以我想实现分页。但是文档api不支持它

import { Select} from 'antd';
const Option = Select.Option;

let provinceData = []; 


render:

 <Select>
      {provinceData.map(province => <Option>{province}</Option>)}
 </Select>

从“antd”导入{Select}；
const Option=Select.Option；
让provinceData=[]；
提供：
{provinceData.map（省=>{province}}

---

provinceData可以从接口获取大量数据，因此我希望在antd select上实现分页。当我滑到“选择”底部时，它会重新加载新数据。

如果您有大量数据，请避免在下拉列表中显示。但是您仍然喜欢实现您想要的，这里是带有分页的下拉列表的粗略形式

实施：

从“React”导入React；
从“react dom”导入react dom；
导入“antd/dist/antd.css”；
导入“/index.css”；
从“antd”导入{选择、图标、分隔符、分页、按钮}；
从“伪造者”进口伪造者；
const Option=Select.Option；
让名称=[]；
常数计数=100；
常数pageSize=5；
for（设i=0；i{
让toSendNames=[]；
for（设i=（pageNumber-1）*pageSize；i{
返回(
{
this.setState（{isOpen:true}）；
}}
open={this.state.isOpen}
dropdownRender={menu=>(
{menu}
{
这是我的国家({
当前页面：页面索引
});
}}
/>


这是我的国家({
伊索彭：错
})
}
>
接近
)}
>
{getNames（this.state.currentPage）.map（项=>{
返回{item}；
})}
);
};
}
render（，document.getElementById（“容器”）；

---

我希望这会有所帮助。

可能与否重复，我使用了Antd库。我想在选择Antd时添加分页。我不能放弃antd@Gaspar

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Select, Icon, Divider, Pagination, Button } from "antd";
import faker from "faker";

const Option = Select.Option;
let names = [];
const count = 100;
const pageSize = 5;
for (let i = 0; i < count; i++) {
  names.push(faker.name.firstName());
}

const getNames = pageNumber => {
  let toSendNames = [];
  for (let i = (pageNumber - 1) * pageSize; i < pageNumber * pageSize; i++) {
    toSendNames.push(names[i]);
  }
  console.log(toSendNames);
  return toSendNames;
};

class Test extends React.Component {
  state = {
    isOpen: false,
    currentPage: 1
  };

  paginationRef = React.createRef();

  render = () => {
    return (
      <div>
        <Select
          style={{ width: 250 }}
          onFocus={() => {
            this.setState({ isOpen: true });
          }}
          open={this.state.isOpen}
          dropdownRender={menu => (
            <div>
              {menu}
              <Divider style={{ margin: "4px 0" }} />
              <div style={{ padding: "8px", textAlign: "center" }}>
                <Pagination
                  simple
                  current={this.state.currentPage}
                  total={count}
                  onChange={pageIndex => {
                    this.setState({
                      currentPage: pageIndex
                    });
                  }}
                />
                <br />
                <Button
                  type="ghost"
                  style={{ width: "100%", borderColor: "red" }}
                  size="small"
                  onClick={() =>
                    this.setState({
                      isOpen: false
                    })
                  }
                >
                  Close
                </Button>
              </div>
            </div>
          )}
        >
          {getNames(this.state.currentPage).map(item => {
            return <Option value={item}>{item}</Option>;
          })}
        </Select>
      </div>
    );
  };
}

ReactDOM.render(<Test />, document.getElementById("container"));