部落格文章：在 React 中建立簡(jiǎn)單的幻燈片導(dǎo)航元件

在這篇文章中，我們將逐步介紹如何在 React 中建立一個(gè)基本的幻燈片導(dǎo)覽元件。此元件允許使用者使用「重新啟動(dòng)」、「上一頁(yè)」和「下一頁(yè)」按鈕瀏覽一系列幻燈片。我們將使用 React 的 useState 鉤子管理目前投影片索引，並確保在適當(dāng)?shù)臅r(shí)候停用按鈕（例如，在投影片的開頭或結(jié)尾）。

準(zhǔn)則概述

幻燈片組件接收幻燈片數(shù)組作為道具。每張投影片都包含一個(gè)標(biāo)題和一些文字。導(dǎo)航按鈕允許使用者在幻燈片中向前和向後移動(dòng)，「重新啟動(dòng)」按鈕使用戶返回到第一張投影片。

使用 useState 管理狀態(tài)

我們使用 useState 鉤子來管理目前投影片索引：

const [currentSlideIndex, setCurrentSlideIndex] = useState(0);

此狀態(tài)追蹤目前顯示的幻燈片。我們從投影片 0 開始，並在使用者點(diǎn)擊「上一張」、「下一張」或「重新啟動(dòng)」按鈕時(shí)更新此值。

處理按鈕點(diǎn)擊

我們定義了三個(gè)函數(shù)來處理每個(gè)按鈕的行為：

1. 重新啟動(dòng)按鈕：將目前投影片索引重設(shè)為 0，將使用者帶回第一張投影片。

const handleRestart = () => {
  setCurrentSlideIndex(0);
};

1. 上一頁(yè)按鈕：將投影片索引減 1，但確保它永遠(yuǎn)不會(huì)低於 0（第一張投影片）。

const handlePrev = () => {
  setCurrentSlideIndex((prevIndex) => Math.max(prevIndex - 1, 0));
};

1. 下一個(gè)按鈕：將投影片索引增加 1，但確保它不會(huì)超出最後一張投影片。

const handleNext = () => {
  setCurrentSlideIndex((prevIndex) => Math.min(prevIndex + 1, slides.length - 1));
};

禁用按鈕

當(dāng)使用者查看第一張投影片時(shí)，我們會(huì)停用「上一張」和「重新開始」按鈕，當(dāng)使用者查看最後一張投影片時(shí)，我們會(huì)停用「下一張」按鈕：

<button
  data-testid="button-restart"
  onClick={handleRestart}
  disabled={currentSlideIndex === 0}
>
  Restart
</button>

<button
  data-testid="button-prev"
  onClick={handlePrev}
  disabled={currentSlideIndex === 0}
>
  Prev
</button>

<button
  data-testid="button-next"
  onClick={handleNext}
  disabled={currentSlideIndex === slides.length - 1}
>
  Next
</button>

渲染投影片內(nèi)容

元件使用 currentSlideIndex 狀態(tài)渲染目前投影片的標(biāo)題和文字：

<div>



<h4>
  
  
  結(jié)論
</h4>

<p>這個(gè)簡(jiǎn)單而有效的滑動(dòng)導(dǎo)航元件展示了 React useState 管理 UI 狀態(tài)的強(qiáng)大功能。透過使用動(dòng)態(tài)狀態(tài)和事件處理，我們創(chuàng)建了一個(gè)靈活的元件，允許用戶以用戶友好的方式與投影片互動(dòng)。您可以透過新增動(dòng)畫或自動(dòng)幻燈片轉(zhuǎn)換等功能來擴(kuò)展此元件。 </p>


          </div>

            
        

以上是如何在react.js中進(jìn)行分頁(yè)重啟，上一頁(yè)，下一頁(yè)的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！