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

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

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

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

但请确保page属性是组件的一种状态，以便React在组件更改时自动刷新组件。关于你使用setPage，我想已经是这样了

Answer 2

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

注意：您在第一个条件中有一个错误，因为如果您有50个页面，而实际页面是50，则条件(page <= lastpage)将为true，您将把用户发送到不存在的页面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>