我正在使用以下代碼進行分頁。
<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我該怎么做？
uj5u.com熱心網友回復：
您可以使用按鈕disabled屬性上的運算式有條件地禁用按鈕。例如，對于上一個按鈕，您可以這樣做，
<button disabled={page == 1} className="page-link btn btn-success btn-block" onClick={prev} >Previous</button>
您也可以對 Next 按鈕執行相同的操作。只需將運算式更改為page == lastPage
但是請確保該page屬性是組件的狀態，以便 React 在組件發生變化時自動重繪 該組件。關于你的使用，setPage我想已經是這樣了
uj5u.com熱心網友回復：
您可以實作其他方法，例如在頁面加載時禁用按鈕或類似方法，但如果您想保持簡單，只需添加警報。
注意：您在第一個條件中存在錯誤，因為如果您有 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>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/373136.html
標籤：javascript 反应 打字稿 用户界面
上一篇：HTML中的本地音頻