我试图将React表带分页动态地实现到我的表数据中。这是我到目前为止所取得的成就:
class TestPagination extends Component {
constructor(props) {
super(props);
this.state = {
currentPage: props.currentPage
};
}
handleClick = (e, index) => {
e.preventDefault();
this.setState({
currentPage: index
});
};
render() {
const { pageSize, pageCount, currentPage, data } = this.props;
//here: pageSize: 5, pageCount: 4, currentPage: 0
let pageNumbers = [];
for (let i = 1; i <= pageCount; i++) {
pageNumbers.push(
<PaginationItem key={i} active={currentPage === i ? true : false}>
<PaginationLink onClick={e => this.handleClick(e, i)} href="#">
{i}
</PaginationLink>
</PaginationItem>
);
}
return (
<React.Fragment>
{data[0]
.slice(currentPage * pageSize, (currentPage + 1) * pageSize)
.map((datum, i) => (
<tr className="data-slice" key={i}>
<td>{datum.id}</td>
<td>{datum.message}</td>
</tr>
))}
<React.Fragment>
<Pagination aria-label="Page navigation example">
<PaginationItem disabled={currentPage <= 0}>
<PaginationLink
onClick={e => this.handleClick(e, currentPage - 1)}
previous
href="#"
/>
</PaginationItem>
{pageNumbers}
<PaginationItem disabled={currentPage >= pageCount - 1}>
<PaginationLink
onClick={e => this.handleClick(e, currentPage + 1)}
next
href="#"
/>
</PaginationItem>
</Pagination>
</React.Fragment>
</React.Fragment>
);
}
}
export default TestPagination;
我要在桌子上显示4个页码。但是,当我单击下一步按钮时,什么也没有进行。
第4页之后的下一个箭头未呈现其他数据。请帮助解决问题。
答案 0 :(得分:2)
在这一行中,您将从props获取currentPage:
const { pageSize, pageCount, currentPage, data } = this.props;
但是currentPage必须取自状态:
const { pageSize, pageCount, data } = this.props;
const {currentPage} = this.state;
由于我不知道组件中数据的形状,因此将其用作简单数组。
工作代码和框:
https://codesandbox.io/s/so-react-page-n89hq
import React, { Component } from "react";
import { Pagination, PaginationItem, PaginationLink, Button } from "reactstrap";
class TestPagination extends Component {
constructor(props) {
super(props);
this.state = {
currentPage: props.currentPage
};
}
handleClick = (e, index) => {
e.preventDefault();
console.log(index);
this.setState({
currentPage: index
});
};
render() {
const { pageSize, pageCount, data } = this.props;
const { currentPage } = this.state;
let pageNumbers = [];
for (let i = 0; i < pageCount; i++) {
pageNumbers.push(
<PaginationItem key={i} active={currentPage === i ? true : false}>
<PaginationLink onClick={e => this.handleClick(e, i)} href="#">
{i + 1}
</PaginationLink>
</PaginationItem>
);
}
const paginatedData = data.slice(
currentPage * pageSize,
(currentPage + 1) * pageSize
);
return (
<React.Fragment>
{paginatedData.map((datum, i) => (
<tr className="data-slice" key={i}>
<td>{datum.id}</td>
<td>{datum.message}</td>
<td>
<Button id={datum.i} color="primary">
Edit Details
</Button>
</td>
</tr>
))}
<React.Fragment>
<Pagination aria-label="Page navigation example">
<PaginationItem>
<PaginationLink
onClick={e => this.handleClick(e, currentPage - 1)}
previous
href="#"
/>
</PaginationItem>
{pageNumbers}
<PaginationItem disabled={currentPage >= pageCount - 1}>
<PaginationLink
onClick={e => this.handleClick(e, currentPage + 1)}
next
href="#"
/>
</PaginationItem>
</Pagination>
<hr />
currentPage (real): {this.state.currentPage} <br />
currentPage (visual): {this.state.currentPage + 1}
</React.Fragment>
</React.Fragment>
);
}
}
export default TestPagination;
并在App.js中这样使用:
function App() {
const data = [
{ id: 1, message: "A" },
{ id: 2, message: "B" },
{ id: 3, message: "C" },
{ id: 4, message: "D" },
{ id: 5, message: "E" },
{ id: 6, message: "F" },
{ id: 7, message: "G" }
];
return (
<div className="App">
<TestPagination pageSize={3} pageCount={3} currentPage={0} data={data} />
</div>
);
}