如何在 antd select 上添加分页?因为从接口获取数据是巨大的.所以我想实现分页 [英] How can I add paging on the antd select ? Because getting data from the interface is huge. So I want to implement paging

问题描述

如何在 Antd 的 Select 上添加分页?因为从接口获取数据是巨大的.所以我想实现分页.但是文档api不支持.

import { Select} from 'antd';const 选项 = Select.Option;让省数据 = [];使成为:<选择>{provinceData.map(province => <Option>{province}</Option>)}

provinceData 从接口获取的数据可能很大，所以我希望能在antd select上实现分页.当我滑动到 Select 底部时，它会重新加载新数据.

解决方案

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

实现:CodeSandBox 链接

从react"导入React；从react-dom"导入 ReactDOM；导入antd/dist/antd.css"；导入./index.css"；import { Select, Icon, Divider, Pagination, Button } from "antd";从faker"导入faker；const 选项 = Select.Option;让名字= [];常量计数 = 100;const pageSize = 5;for (let i = 0; i < count; i++) {names.push(faker.name.firstName());}const getNames = pageNumber =>{让 toSendNames = [];for (let i = (pageNumber - 1) * pageSize; i < pageNumber * pageSize; i++) {toSendNames.push(names[i]);}console.log(toSendNames);返回到SendNames；};类测试扩展了 React.Component {状态 = {isOpen: 假，当前页:1};paginationRef = React.createRef();渲染 = () =>{返回 (<div><选择样式={{ 宽度:250 }}onFocus={() =>{this.setState({ isOpen: true });}}open={this.state.isOpen}dropdownRender={菜单=>(<div>{菜单}<Divider style={{ margin: "4px 0" }}/><div style={{ padding: "8px", textAlign: "center" }}><分页简单的当前={this.state.currentPage}总计={计数}onChange={pageIndex =>{this.setState({当前页面:页面索引});}}/><br/><按钮类型=鬼"style={{ width: "100%", borderColor: "red" }}大小=小"onClick={() =>this.setState({isOpen: 假})}>关闭</按钮>

)}>{getNames(this.state.currentPage).map(item => {return <Option value={item}>{item}</Option>;})}

);};}ReactDOM.render(, document.getElementById("container"));

我希望这会有所帮助.

How can I add paging on the Select of Antd ? Because getting data from the interface is huge. So I want to implement paging. But the document api don't support it.

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

let provinceData = []; 


render:

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

provinceData that getting from the interface can be huge，so I expect to implement paging on antd select. When I slide to the Select bottom, it reload the new data.

解决方案

If you have huge data, avoid showing in dropdown. But still you like to implement what you want, here is the crude form of dropdown with pagination.

Implementation: CodeSandBox Link

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"));

i hope this would help.

这篇关于如何在 antd select 上添加分页?因为从接口获取数据是巨大的.所以我想实现分页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！