Как сделать пагинацию?

Добрый день, не могу с пагинацией разобраться, подсупортите пожалуйста
есть вот такая пагинация (material-ui)
626ae199a9467417193918.png
у меня есть массив данных, я хочу выводить на страницу только 4 айтема
let currentCountCard = data.slice(0, 4) вот таким образом, я понимаю это делать нормально
но что бы это динамически считалось я хочу умножать страницу на количество айтемов и потом отнимать 4
допустим пользователь нажал на страницу 4 я беру 4*4 = 16, а потом slice(16-4, 16) и получается как раз 4 айтема
но я не понимаю, каким образом мне понимать на какую страницу нажал пользователь, а если он на эту страницу нажал 2 раза, а если он на стрелку нажал, а если на стрелку нажал два раза
Ну мне только в голову такой вариант приходит, наверняка можно как-то и легче сделать
Ну либо объявить стейт и при клике проверять, если страница > 1 то в стейт добавлять +1, если меньше, то убирать 1
Ну на джаваскрипте мне приходит в голову идея, брать иннер текст элемента куда пользователь нажал, а у стрелок брать проверять клосест класс и тоже в зависимости от результата, что-то делать
но как это сделать проще и адекватнее на реакте
  • Вопрос задан
  • 603 просмотра
Решения вопроса 1
@Ne7Le4Der
Если вы используете Material UI, то у компонента Pagination есть свойство onChange (https://mui.com/material-ui/react-pagination/). Поставив обработчик на этот метод, вы можете узнать какая сейчас выбрана страница, и вам не нужно обрабатывать клики на страницы или на стрелочки, вам просто отдастся новая страница при изменении. Пример из той же доки (https://codesandbox.io/s/dzqzh1?file=/demo.js)
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы