分頁組件:
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() 不是一個數(shù)字返回true
alert('請輸入數(shù)字!')
} else if(value > pageTotal || value === null || value.trim() === '') { //使用trim()去掉空格,全為空格的字符串不為''也不為null
alert('請輸入合法的頁碼')
} else {
window.location.hash = `#${value}`;
this.goToPage(parseInt(value, 10)) //這里一定要將value類型轉(zhuǎn)換為數(shù)字甘邀,用戶手動輸入頁碼很有可能是string此衅。而最好在這里轉(zhuǎn)換是因?yàn)橐呀?jīng)過濾了不是數(shù)字和空的值金句,不會出現(xiàn)NaN的情況
}
}
}
render() {
let pageTotal = Math.ceil(this.props.total / this.props.pageSize); //頁碼總數(shù)
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>/ {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, //數(shù)據(jù)總數(shù)
pageSize: PropTypes.number, //一頁顯示幾條數(shù)據(jù)
currentPageNum: PropTypes.number, //當(dāng)前頁碼
};
調(diào)用方法:
import React, { Component } from 'react';
import Pagination from '../components/pagination';
class Test extends Component {
constructor(props) {
super(props);
this.state = {
total: 0, //數(shù)據(jù)總數(shù)
data: [],
};
this.pageSize = 10; //一頁顯示的數(shù)據(jù)條數(shù)
}
//獲取數(shù)據(jù)
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;