Блог

Я использую приведенный ниже код для разбиения на страницы.

 lt;ul className="pagination"gt;  lt;li className="page-item"gt;  lt;button className="page-link btn btn-success btn-block" onClick={prev} gt;Previouslt;/buttongt;  lt;/ligt;  lt;li className="page-item"gt;  lt;button className="page-link btn btn-success btn-block " onClick={next}gt;Nextlt;/buttongt;  lt;/ligt;  lt;/ulgt;    const next = () =gt; {  if (page lt;= lastPage) {  setPage(page   1);  }  }  const prev = () =gt; {  if (page gt; 1) {  setPage(page - 1);  }  }  

мое требование заключается в том, что когда данные first page отображаются, prev кнопка должна быть отключена. когда данные lastpage отображаются, next кнопка должна быть отключена.

Я имею в виду if(page==1) отключать prev и if(page==lastPage) отключать next .как я могу это сделать?

Вы можете условно отключить кнопку, используя выражение в disabled свойстве кнопки. Например, для предыдущей кнопки вы можете сделать это,

 lt;button disabled={page == 1} className="page-link btn btn-success btn-block" onClick={prev} gt;Previouslt;/buttongt;  

Вы также можете выполнить то же самое для следующей кнопки. Просто измените выражение на page == lastPage

Но убедитесь, что page свойство является состоянием компонента, чтобы React автоматически обновлял компонент при его изменении. Что касается вашего использования setPage , я полагаю, что это уже так

Вы можете реализовать другие методы, такие как отключение кнопки при загрузке страницы или что-то в этом роде, но если вы хотите, чтобы все было просто, просто добавьте предупреждения.

ПРИМЕЧАНИЕ: У вас была ошибка в первом условии, потому что, если у вас 50 страниц, а фактическая страница равна 50, условие (page lt;= lastpage) будет истинным, и вы отправите пользователя на страницу 51, которой не существует.

 const next = () =gt; {  if (page lt; lastPage) {  setPage(page   1);  } else {  alert("This is the last page");  } } const prev = () =gt; {  if (page gt; 1) {  setPage(page - 1);  } else {  alert("This is the first page");  } } 

 lt;ul className="pagination"gt;  lt;li className="page-item"gt;  lt;button className="page-link btn btn-success btn-block" onClick={prev}gt;Previouslt;/buttongt;  lt;/ligt;  lt;li className="page-item"gt;  lt;button className="page-link btn btn-success btn-block " onClick={next}gt;Nextlt;/buttongt;  lt;/ligt; lt;/ulgt;