React+Antd Design实现分页

目的

前端实现分页，用户点击分页按钮，数据分页显示

思路

  • 引入Antd Design的Pagination分页组件

  • 在构造函数中设置数据state

  • 使用其自带的onChange事件函数，当点击页面时，这个函数会默认自动将页面数作为参数传入

  • 使用onChange函数，操纵数据，截取数组的数据片段

  • 渲染函数, 监听数据变化，渲染不同的页面数据

步骤

  1. 引入Antd Design的Pagination分页组件, 在构造函数中设置数据state,

import { Card, Pagination } from "antd";
export class App extends Component {
constructor(props) {
super(props);
// 设置一个页面显示3个数据
this.state = {
minValue: 0,
maxValue: 3
};
}
**********

  1. 使用其自带的onChange事件

// 根据传入的页面值，计算并截取数组的部分数据，作为相应页面的数据，这里一个页面只显示3个数据
handleChange = value => {
if (value <= 1) {
this.setState({
minValue: 0,
maxValue: 3
});
} else {
this.setState({
minValue: (value-1) * 3,
maxValue: (value-1) * 3+ 3
});
}
};
render(){
********
<Pagination
defaultCurrent={1}  // 默认在第一个页面
defaultPageSize={3} // 默认一个页面显示3个数据
// 点击页面触发更新，点击时，默认传入页面值，例如第一页，值为1
onChange={this.handleChange}
// 设置整个数据的总数量
total={data.length}
/>
*******
}

  1. 根据state的值，渲染相应页面的数据，例如页面2，其数据的位置区间为3-6,

render(){
{data &&
data.length > 0 &&
data.slice(this.state.minValue, this.state.maxValue).map(val => (
<Card
title={val.title}
style={{ width: 300 }}
>
<p>{val.value}</p>
</Card>
))}
}

效果图

完整代码

import React, { Component } from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Card, Pagination } from "antd";
export class App extends Component {
constructor(props) {
super(props);
this.state = {
minValue: 0,
maxValue: 3
};
}
handleChange = value => {
if (value <= 1) {
this.setState({
minValue: 0,
maxValue: 3
});
} else {
this.setState({
minValue: (value-1) * 3,
maxValue: (value-1) * 3+ 3
});
}
};
render() {
let data = [
{ title: "Card title1", value: "Card content1" },
{ title: "Card title2", value: "Card content2" },
{ title: "Card title3", value: "Card content3" },
{ title: "Card title4", value: "Card content4" },
{ title: "Card title5", value: "Card content5" },
{ title: "Card title6", value: "Card content6" },
{ title: "Card title7", value: "Card content7" },
{ title: "Card title8", value: "Card content8" },
{ title: "Card title9", value: "Card content9" },
{ title: "Card title10", value: "Card content10" },
{ title: "Card title11", value: "Card content11" },
{ title: "Card title12", value: "Card content12" },
{ title: "Card title13", value: "Card content13" },
{ title: "Card title14", value: "Card content14" },
{ title: "Card title15", value: "Card content15" }
];
return (
<div>
{data &&
data.length > 0 &&
data.slice(this.state.minValue, this.state.maxValue).map(val => (
<Card
title={val.title}
style={{ width: 300 }}
>
<p>{val.value}</p>
</Card>
))}
<Pagination
defaultCurrent={1}
defaultPageSize={3}
onChange={this.handleChange}
total={data.length}
/>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("container"));

以上是 React+Antd Design实现分页 的全部内容， 来源链接： utcz.com/a/22426.html

回到顶部