React简单的分页代码实现（子组件向父组件传值）

前言

分页其实很容易实现，我自己写了一个简单的分页组件，可以实现上下翻页，输入页码跳转到指定页，刷新页面后不会回到第一页（hash值记录当前页码）。效果如下：

功能分析

把这个组件拆开看，其实就是三个功能：

1. 翻页（基本功能）
2. 跳转到指定页
3. 记录页码（利用hash）

父组件向分页组件需要传递两个值：数据总数，一页显示几条数据。

<Pagination         total={this.state.total}         pageSize = {this.pageSize} />

翻页功能实现

分页组件：

    constructor(props) {        super(props);        this.state = {            currentPageNum: props.currentPageNum, //当前页码        }    }    render() {        let pageTotal = Math.ceil(this.props.total / this.props.pageSize); //页码总数        return (            <section>                <a href="javascript:void(0)">上一页  </a>                <div>                    <input type="text" value={this.state.currentPageNum} />                    <span>/{pageTotal}</span>                </div>                <a href="javascript:void(0)">下一页 </a>            </section>        )    }}

当前页码currentPageNum是从父组件传递过来的值，一般情况下不需要传这个值，我之前是从父组件更改它，后来修改了代码，就在组件里更新它，不过父组件也可以传当前页码过来。
到这里就完成了基本的分页组件展示了，接下来开始实现上一页和下一页功能。
给上一页和下一页绑定事件：

<a href="javascript:void(0)" onClick={() => this.goToPage(this.state.currentPageNum-1)}>上一页  </a><a href="javascript:void(0)" onClick={() => this.goToPage(this.state.currentPageNum+1)}>下一页  </a>

goToPage()方法：

//翻页    goToPage(num) {        this.setState({currentPageNum: num});        this.props.goToPage(num);     }

这里this.props.goToPage()是子组件调用父组件传过来的方法。点击翻页的时候，子组件也需要向父组件传参，并调用该方法，通过回调函数就实现了子组件向父组件传值。
父组件要传递这个函数：

<Pagination       total={this.state.total}       pageSize = {this.pageSize}       currentPageNum = {this.state.currentPageNum}       goToPage = {(pageNum) => this.goToPage(pageNum)} />

这里父组件就可以获取到翻页子组件传过来的页码，然后根据这个页码发起网络请求，这里怎么写和后台有关，比如我们的后台是有分页的，我要请求第几页，请求多少条数据传递给后台就可以，可能有的后台是返回了全部数据，然后前端去处理分页，那就不是发起网络请求，而是将当前显示的数据index往后移 当前页码currentPageNum * 一页显示数据条数pageSize这么多位置，以实现翻页效果。
父组件的翻页事件：

//翻页    goToPage(pageNum) {        this.requestNewsData(pageNum); //网络请求的方法    }

以上短短几行代码就实现了翻页，不过还不够完善，比如我并没有对上一页和下一页按钮做限制，即如果当前是第一页和最后一页就不能再触发goToPage()方法了，所以我应该在goToPage()里面去判断当前页码是否是第一页或者最后一页，这里我采用了另一种方式。
注意看页面按钮是有两种状态，当不可点击时箭头是灰色的，大部分翻页都有这个效果，我觉得最好的方式是使用两种标签：可点击状态的<a>标签和不可点击的<span>标签，使用三目运算符做判断，这样就保证了currentPageNum-1或者+1都不会越界。
以下是对上一页按钮做的处理：

//nextBtnDisabled是不可点击状态的图标，nextBtn是可点击状态的图标{this.state.currentPageNum === 1 ?                    <span>                        <img src={nextBtnDisabled} alt=""/>                    </span>                    :                    <a href="javascript:void(0)" onClick={() => this.goToPage(this.state.currentPageNum-1)}>                        <img src={nextBtn} alt="" />                    </a>}

下一页按钮类似，只需将this.props.currentPageNum === 1改为this.props.currentPageNum === pageTotal ,我觉得在这里做判断是最简单的做法，这样无需考虑页码越界的问题，而且视觉上也让用户体验更好。

输入页码跳转到指定页功能实现

给input框绑定事件：

<input        type="text"        value={this.state.currentPageNum}        onChange={this.changePageNumber.bind(this)}        onKeyUp={(event) => this.handleKeyUp(event, pageTotal)}/>

onChange事件当输入框值发生变化时被触发，输入框的值即当前页码

//页码输入框    changePageNumber(event) {        this.setState({            currentPageNum: event.target.value        });    }

onKeyUp事件是键盘按下事件，我是在按下回车键的时候触发更新，另外，也需要做判断，判断是否是合法的页码：

//键盘按下事件,pageTotal是页码数    handleKeyUp(e, pageTotal) {        let value = e.target.value;        let event = e || window.event;        let code = event.keyCode || event.which || event.charCode;        if (code === 13) { //回车键            if (isNaN(value)) { //isNaN() 不是一个数字返回true                alert('请输入数字！')            } else if(value > pageTotal || value === null || value.trim() === '') { //使用trim()去掉空格，全为空格的字符串不为''也不为null                alert('请输入合法的页码')            } else {                this.goToPage(parseInt(value, 10)) //输入了合法页码，调用跳转页面方法。            }        }    }

分页锚点功能实现（使用react-router-dom）

一般有分页的地方都会有锚点，记录当前页码，当浏览器刷新或者回退时可以定位到当前页码，因为我的路由用的react-router-dom,所以页面跳转用Link，这里将a标签替换成Link标签：

import { Link } from 'react-router-dom';{/*下一页按钮只是将this.state.currentPageNum-1改为this.state.currentPageNum+1*/}<Link    to={{        pathname: '/blog',        hash: `#${this.state.currentPageNum-1}`    }}    onClick={() => this.goToPage(this.state.currentPageNum-1)}>    <img src={preBtn} alt="" /></Link>//pathname的值是博客页的路由

hash: #${this.state.currentPageNum-1}就是将页码设置为hash值，会显示在url地址栏中，比如：www.baidu.com#2这种形式。这样就实现了将页码作为锚点的功能，不过要实现刷新时依然在当前页码，还需要在componentDidMount里面手动解析url将页码取出来然后再调用goToPage()方法：

componentDidMount() {        this.handleAnchor() //页面刷新时回到刷新前的page    }    handleAnchor() {        let index = window.location.hash.slice(1) || 1; //获取hash值        this.goToPage(parseInt(index, 10));    }

最后还有输入页码当页码合法时跳转到指定页也需要添加hash值：

 window.location.hash = `#${value}`;

代码

分页组件:

import React, { Component } from 'react';import PropTypes from 'prop-types';import { Link } from 'react-router-dom';import './style.css';import nextBtn from './images/nextBtn.png';import preBtnDisabled from './images/preBtn-disabled.png';export default class Pagination extends Component {    constructor(props) {        super(props);        this.state = {            currentPageNum: 1,        }    }    componentDidMount() {        this.handleAnchor() //页面刷新时回到刷新前的page    }    handleAnchor() {        let index = window.location.hash.slice(1) || 1;        this.goToPage(parseInt(index, 10));    }    //翻页    goToPage(num) {        this.setState({currentPageNum: num});        this.props.goToPage(num);    }    //页码输入框    changePageNumber(event) {        this.setState({            currentPageNum: event.target.value        });    }    //键盘按下事件    handleKeyUp(e, pageTotal) {        let value = e.target.value;        let event = e || window.event;        let code = event.keyCode || event.which || event.charCode;        if (code === 13) { //回车键            if (isNaN(value)) { //isNaN() 不是一个数字返回true                alert('请输入数字！')            } else if(value > pageTotal || value === null || value.trim() === '') { //使用trim()去掉空格，全为空格的字符串不为''也不为null                alert('请输入合法的页码')            } else {                window.location.hash = `#${value}`;                this.goToPage(parseInt(value, 10)) //这里一定要将value类型转换为数字，用户手动输入页码很有可能是string。而最好在这里转换是因为已经过滤了不是数字和空的值，不会出现NaN的情况            }        }    }    render() {        let pageTotal = Math.ceil(this.props.total / this.props.pageSize); //页码总数        return (            <section className="pagination">                {this.state.currentPageNum === 1 ?                    <span className="pagination-button">                        <img src={preBtnDisabled} alt=""/>                    </span>                    :                    <Link                        to={{                            pathname: '/blog',                            hash: `#${this.state.currentPageNum-1}`                        }}                        className="pagination-button pre-button"                        onClick={() => this.goToPage(this.state.currentPageNum-1)}                    >                        <img src={nextBtn} alt="" style={{transform: 'rotate(180deg)'}}/>                    </Link>                }                <div className="pagination-pageNumber">                    <p>                        <input                            type="text"                            value={this.state.currentPageNum}                            onChange={this.changePageNumber.bind(this)}                            onKeyUp={(event) => this.handleKeyUp(event, pageTotal)}                        />                        <span>/&nbsp;{pageTotal}</span>                    </p>                </div>                {this.state.currentPageNum === pageTotal ?                    <span className="pagination-button">                        <img src={preBtnDisabled} alt="" style={{transform: 'rotate(180deg)'}}/>                    </span>                    :                    <Link                        to={{                            pathname: '/blog',                            hash: `#${this.state.currentPageNum+1}`                        }}                        className="pagination-button next-button"                        onClick={() => this.goToPage(this.state.currentPageNum+1)}                    >                        <img src={nextBtn} alt="" />                    </Link>                }            </section>        )    }}Pagination.defaultProps = {    pageSize: 5,    currentPageNum: 1,};Pagination.propTypes = {    total: PropTypes.number.isRequired, //数据总数    pageSize: PropTypes.number, //一页显示几条数据    currentPageNum: PropTypes.number, //当前页码};

调用方法：

import React, { Component } from 'react';import Pagination from '../components/pagination';class Test extends Component {    constructor(props) {        super(props);        this.state = {            total: 0, //数据总数            data: [],        };        this.pageSize = 10; //一页显示的数据条数    }    //获取数据    requestData() {        fetch('http://localhost:3100/test.json').then(response => response.json())            .then(res => {              this.setState({                total: res.total,                data: res.data              })            })            .catch(err => console.log('err', err))    }    //翻页    goToPage(pageNum) {        this.requestData();    }    render() {        let blogItem = this.state.data && this.state.data.map((item, index) => {            return (                <section key={index}>                      <p>{item.categoryName}</p>                      <img src = {{uri: item.coverUrl}} alt=""/>                      <h3>{item.title}</h3>                </section>            )        });        return (            <section>                {blogItem}                <Pagination                    total={this.state.total}                    pageSize = {this.pageSize}                    goToPage = {(pageNum) => this.goToPage(pageNum)}                />            </section>        )    }}export default Test;

最后

写的不是很好，还请大家多多包涵。