javascript - ReactJS - covering with '0' the blank spaces
问题描述
I have this ReactJS App
See the app working
https://codepen.io/claudio-bitar/pen/VERORW
It returns a pagination with at maximum eight numbers per page.
Example: I have ten numbers, so
Page one: 1, 2, 3, 4, 5, 6, 7, 8
page two: 9, 10
I would like to cover with '0' the blank numbers space until I reached 8 numbers. For example in the page two I would like to return:
9, 10, 0, 0, 0, 0, 0, 0
How can I solve it? Thank you
The App code:
class TodoApp extends React.Component {
constructor() {
super();
this.state = {
todos: {
"elements": ['1','2','3','4','5','6','7','8','9','10']
},
currentPage: 1,
todosPerPage: 8
};
this.handleClick = this.handleClick.bind(this);
}
handleClick(event) {
this.setState({
currentPage: Number(event.target.id)
});
}
render() {
const { todos, currentPage, todosPerPage } = this.state;
// Logic for displaying current todos
const indexOfLastTodo = currentPage * todosPerPage;
const indexOfFirstTodo = indexOfLastTodo - todosPerPage;
const currentTodos = todos.elements.slice(indexOfFirstTodo, indexOfLastTodo);
const renderTodos = currentTodos.map((todo, index) => {
return <li key={index}>{todo}</li>;
});
// Logic for displaying page numbers
const pageNumbers = [];
for (let i = 1; i <= Math.ceil(todos.elements.length / todosPerPage); i++) {
pageNumbers.push(i);
}
const renderPageNumbers = pageNumbers.map(number => {
return (
<li
key={number}
id={number}
onClick={this.handleClick}
>
{number}
</li>
);
});
return (
<div>
<ul>
{renderTodos}
</ul>
<ul id="page-numbers">
{renderPageNumbers}
</ul>
</div>
);
}
}
ReactDOM.render(
<TodoApp />,
document.getElementById('app')
);
解决方案
您可以创建一个循环,该循环将循环直到其中currentTodos
包含todosPerPage
元素,然后推送0
直到它出现。
class TodoApp extends React.Component {
// ...
render() {
const { todos, currentPage, todosPerPage } = this.state;
// Logic for displaying current todos
const indexOfLastTodo = currentPage * todosPerPage;
const indexOfFirstTodo = indexOfLastTodo - todosPerPage;
const currentTodos = todos.elements.slice(
indexOfFirstTodo,
indexOfLastTodo
);
while (currentTodos.length !== todosPerPage) {
currentTodos.push(0);
}
// ...
}
}
class TodoApp extends React.Component {
constructor() {
super();
this.state = {
todos: {
elements: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]
},
currentPage: 1,
todosPerPage: 8
};
this.handleClick = this.handleClick.bind(this);
}
handleClick(event) {
this.setState({
currentPage: Number(event.target.id)
});
}
render() {
const { todos, currentPage, todosPerPage } = this.state;
// Logic for displaying current todos
const indexOfLastTodo = currentPage * todosPerPage;
const indexOfFirstTodo = indexOfLastTodo - todosPerPage;
const currentTodos = todos.elements.slice(
indexOfFirstTodo,
indexOfLastTodo
);
while (currentTodos.length !== todosPerPage) {
currentTodos.push(0);
}
const renderTodos = currentTodos.map((todo, index) => {
return <li key={index}>{todo}</li>;
});
// Logic for displaying page numbers
const pageNumbers = [];
for (let i = 1; i <= Math.ceil(todos.elements.length / todosPerPage); i++) {
pageNumbers.push(i);
}
const renderPageNumbers = pageNumbers.map(number => {
return (
<li key={number} id={number} onClick={this.handleClick}>
{number}
</li>
);
});
return (
<div>
<ul>{renderTodos}</ul>
<ul id="page-numbers">{renderPageNumbers}</ul>
</div>
);
}
}
ReactDOM.render(<TodoApp />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
推荐阅读
- javascript - 获取 Skype 聊天窗口的元素 id
- java - JPA(EclipseLink)SecondaryTable 与 java 1.7 的错误连接
- jenkins - 将文件从 jenkins 工作区推送到远程 git 存储库
- swift - 使用 Cocos2D/SpriteBuilder 时,使用 UIGraphicsGetImageFromCurrentImageContext 截取的屏幕截图为空白
- php - 通过 Woocommerce 和存款支付显示积极的突出价值
- jquery - 在 DOMNodeInserted 上每个元素只显示一次警报
- javascript - 使用页面一段时间后没有刷新 HTML 元素
- java - HBase 的 Bufferedmutator 中的 OutOfMemoryError
- angular - 角镖步进器
- c - 我不明白这个例子中的位移行为