[英]ReactJS - covering with '0' the blank spaces
I have this ReactJS App我有这个 ReactJS 应用程序
See the app working查看正在运行的应用程序
https://codepen.io/claudio-bitar/pen/VERORW 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第一页:1, 2, 3, 4, 5, 6, 7, 8
page two: 9, 10第二页:9、10
I would like to cover with '0' the blank numbers space until I reached 8 numbers.我想用“0”覆盖空白数字空间,直到我达到 8 个数字。 For example in the page two I would like to return:
例如在第二页我想返回:
9, 10, 0, 0, 0, 0, 0, 0 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')
);
You could create a loop that will loop until currentTodos
has todosPerPage
elements in it and just push 0
until it does.您可以创建一个循环,直到
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.