react分页功能

2022-09-25 09:16:31

React分页功能

话不多说直接上代码(示例):

import React,{ Fragment, Component} from'react';
class RightTwo extends Component{constructor(props){super(props)
        this.state={// 当前渲染的页面数据
            shenchalist:[{ name:"2019-284", room:"留置室59", day:4},{ name:"2019-285", room:"留置室58", day:2},{ name:"2019-286", room:"留置室49", day:0},{ name:"2019-287", room:"留置室39", day:4},{ name:"2019-288", room:"留置室29", day:5},{ name:"2019-289", room:"留置室19", day:8},{ name:"2019-290", room:"留置室69", day:4},{ name:"2019-291", room:"留置室79", day:3},{ name:"2019-292", room:"留置室89", day:1},{ name:"2019-293", room:"留置室99", day:0},{ name:"2019-294", room:"留置室55", day:8},{ name:"2019-295", room:"留置室54", day:7},{ name:"2019-296", room:"留置室53", day:9},{ name:"2019-297", room:"留置室55", day:6},{ name:"2019-296", room:"留置室53", day:9},{ name:"2019-297", room:"留置室55", day:6},{ name:"2019-296", room:"留置室53", day:9},{ name:"2019-297", room:"留置室55", day:6},{ name:"2019-297", room:"留置室55", day:6},{ name:"2019-296", room:"留置室53", day:9},{ name:"2019-297", room:"留置室55", day:6},{ name:"2019-297", room:"留置室55", day:6},{ name:"2019-296", room:"留置室53", day:9},{ name:"2019-297", room:"留置室55", day:6},],// 当前页码
            fyzs:1,//  要去的条数index
            fynum:0,// 每条显示的条数
            shenchafynum:10}}componentDidMount(){const shenchalist= this.state.shenchalistconst shenchafynum= this.state.shenchafynum// 设置总共页数
        this.setState({
            fyzs: Math.ceil(shenchalist.length/ shenchafynum)})}
    btnFenye=(num)=>{
        this.setState({
            fynum: num})}// 上一页
    btnUp=()=>{const fynum= this.state.fynumif(fynum>0){
            this.setState({
                fynum: fynum-1})}}// 下一页
    btnDown=()=>{const fynum= this.state.fynumconst fyzs= this.state.fyzsif(fynum< fyzs-1){
            this.setState({
                fynum: fynum+1})}}render(){const{ baojinglist, shenchalist, fyzs, shenchafynum, fynum}= this.state
        let str=[]for(let i=0; i< fyzs; i++){
            str.push(<span className={i=== fynum?"active":"att"} onClick={()=> this.btnFenye(i)}>{i+1}</span>)}return(<Fragment><div className="rliuzhi"><div className="neirong"><div className="biaoti"><p>审查对象</p><p>审查室</p><p>留置时间</p></div><ul>{shenchalist.slice(fynum* shenchafynum,(fynum+1)* shenchafynum).map((item, index)=>{return(<li key={index}><p>{item.name}</p><p>{item.room}</p><p>{item.day}</p></li>)})}</ul><div className="fenye"><span className="att" onClick={()=> this.btnUp()}>{"<"}</span>{str}<span className="att" onClick={()=> this.btnDown()}>{">"}</span></div></div></div></Fragment>)}}


exportdefault RightTwo;

示例图如下
在这里插入图片描述

  • 作者:嫐。
  • 原文链接:https://blog.csdn.net/qq_43504899/article/details/111353329
    更新时间:2022-09-25 09:16:31