如何在分页中同时设置“上一个”和“下一个”按钮

Question

我想要这样：

但不是这样：

我试图解决此问题，但是没有办法，如果有人知道，请帮忙：这是我在react.js中的渲染代码：

upload

）; }

Answer 1

据我了解，您希望始终显示上一个按钮，并在用户位于首页上时将其显示为禁用状态。

您上一个按钮的当前逻辑是：

{PageNumbers.includes(currentPage - 1) && 
  <a 
    className="prev page-link"
    href="!#"
    onClick={() => { 
      setCurrentPage(currentPage - 1);
      paginate(currentPage - 1); }}
  > 
    Previous
  </a>
}  

这意味着，如果页码列表包含上一页（第1页），请显示按钮，否则将其隐藏。

因此，如果删除条件，将始终显示上一个按钮。

现在，如果我们想添加一个禁用的类，您将需要在CSS中使用一个禁用的规则，例如：

.paginate-disabled {
    cursor: not-allowed;
    background-color: light-gray;
}

现在，我们要有条件地添加CSS类，并在第一页上禁用链接/按钮。因此，我们可以将“上一个”按钮的逻辑更改为以下内容：

<a 
  className={`${currentPage === 1 ? 'paginate-disabled' : ''} prev page-link`}
  disabled={currentPage === 1}
  href="!#"
  onClick={() => { 
    setCurrentPage(currentPage - 1);
    paginate(currentPage - 1); 
  }}
> 
  Previous
</a>

编辑＃1

我不确定为什么禁用后仍能单击“上一步”，但是您可以尝试像这样更新onClick函数：

  onClick={() => this.handleClickPrevious(currentPage)}

并像这样定义handleClickPrevious（最好使用状态处理程序来做到这一点）：

handleClickPrevious = (currentPage) => {
  if (currentPage === 1) {
    return;
  }

  setCurrentPage(currentPage - 1);
  paginate(currentPage - 1);
};

您还可以尝试将onClick函数修改为如下形式：

    onClick={() => {
      if (currentPage > 1) {
        setCurrentPage(currentPage - 1);
        paginate(currentPage - 1); }}
      }
    }

编辑＃2

下一个分页...您应该能够使用上一个按钮的逻辑以类似的方式修改此代码。

<a 
  className={`${currentPage === PageNumbers.length - 1 ? 'paginate-disabled' : ''} next page-link`}
  disabled={currentPage === PageNumbers.length - 1}
  href="!#"
  onClick={() => this.handleClickNext(currentPage)}
> 
  Next
</a>

handleClickNext = (currentPage) => {
  if (currentPage === this.state.PageNumbers.length - 1) {
    return;
  }

  setCurrentPage(currentPage + 1);
  paginate(currentPage + 1);
};