在我的React表分页代码中,有一个输出页码以及用于显示和设置当前页面的输入。
const pageNumbers = [];
if (size) {
for (let i = 1; i <= Math.ceil(size / resultsPerPage); i++) {
pageNumbers.push(i);
}
renderPageNumbers = pageNumbers.map(number => {
if (number === 1 || number === Math.ceil(size / resultsPerPage) || (number >= Number(currentPage) - 2 && number <= Number(currentPage) + 2)) {
if (number !== Number(currentPage)) {
return (
<span className={number === Number(currentPage) ? 'pagination-item--active' : 'pagination-item'} key={number} onClick={() => {
if (Math.ceil(size / resultsPerPage) > 1 && number !== Number(currentPage)) {
setCurrentPage(number);
}
}}>
{number}
</span>
)
} else {
return (
<input type='text'
value={currentPage}
onChange={(evt) => {
if (Number(evt.target.value) > 0 && Math.ceil(size / resultsPerPage) >= Number(evt.target.value)) {
setCurrentPage(evt.target.value);
}
}}
/>
)
}
} else {
return null;
}
});
}
该输入允许在其中粘贴任何长度的数字,或从粘贴的数字中删除单个字符,但不允许输入多个字符。这是为什么? if (size) {...}
条件工作之外几乎相同的代码好:
{Math.ceil(size / resultsPerPage) > 1 &&
<input
className='table-pagination-container__goto-input'
type='text'
value={currentPage}
onChange={(evt) => {
if (Number(evt.target.value) > 0 && Math.ceil(size / resultsPerPage) >= evt.target.value) {
setCurrentPage(evt.target.value);
}
}}
/>
}
完整的组件代码在https://github.com/ElAnonimo/job-fullstack/blob/master/client/src/components/Records.js上。对未清理的代码表示歉意。