在 r 的特定条件下禁用按钮

Question

我正在使用以下代码进行分页。

  <ul className="pagination">
          <li className="page-item">
            <button  className="page-link btn btn-success btn-block"  onClick={prev} >Previous</button>
          </li>
          <li className="page-item">
            <button className="page-link btn btn-success btn-block " onClick={next}>Next</button>
          </li>
        </ul>


 const next = () => {
    if (page <= lastPage) {
      setPage(page + 1);
    }
  }
  const prev = () => {
    if (page > 1) {
      setPage(page - 1);
    }
  }

我的要求是当显示 first page 的数据时，应禁用 prev 按钮。当显示 lastpage 的数据时，应禁用 next 按钮。

我的意思是if(page==1) 禁用prev和if(page==lastPage)禁用 next。我该怎么做？

Answer 1

您可以实施其他方法，例如在页面加载时禁用按钮或类似的方法，但如果您想保持简单，只需添加警报即可。

注意：您在第一个条件中有一个错误，因为如果您有 50 页而实际页面为 50，则条件 (page <= lastpage) 将为真，您会将用户转到第 51 页不存在。

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

<ul className="pagination">
  <li className="page-item">
    <button className="page-link btn btn-success btn-block" onClick={prev}>Previous</button>
  </li>
  <li className="page-item">
    <button className="page-link btn btn-success btn-block " onClick={next}>Next</button>
  </li>
</ul>

Answer 2

您可以在按钮的 disabled 属性上使用表达式有条件地禁用按钮。例如，对于上一个按钮，您可以这样做，

<button disabled={page == 1} className="page-link btn btn-success btn-block"  onClick={prev} >Previous</button>

您也可以对“下一步”按钮执行相同的操作。只需将表达式更改为 page == lastPage

但要确保 page 属性是组件的状态，这样 React 会在组件发生变化时自动刷新组件。关于你对setPage的使用，我想已经是这样了

在 r 的特定条件下禁用按钮

disabling button on specific condition on r

javascript

user-interface

typescript

reactjs