ブログ投稿: React でのシンプルなスライド ナビゲーション コンポーネントの構(gòu)築

この投稿では、React で基本的なスライド ナビゲーション コンポーネントを作成する手順を説明します。このコンポーネントを使用すると、ユーザーは「再開」、「前へ」、「次へ」ボタンを使用して一連のスライド間を移動できます。 React の useState フックを使用して現(xiàn)在のスライド インデックスを管理し、適切な場合 (スライド デッキの最初または最後など) にボタンが無効になるようにします。

コードの概要

Slides コンポーネントは、スライドの配列を小道具として受け取ります。各スライドにはタイトルとテキストが含まれています。ナビゲーション ボタンを使用すると、ユーザーはスライド內(nèi)を前後に移動でき、[再開] ボタンを使用すると最初のスライドに戻ります。

useState による狀態(tài)の管理

useState フックを使用して現(xiàn)在のスライド インデックスを管理します。

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

この狀態(tài)では、現(xiàn)在表示されているスライドが追跡されます。スライド 0 から開始し、ユーザーが [前へ]、[次へ]、または [再開] ボタンをクリックするとこの値が更新されます。

ボタンのクリックの処理

各ボタンの動作を処理する 3 つの関數(shù)を定義します。

1. 再開ボタン: 現(xiàn)在のスライド インデックスを 0 にリセットし、ユーザーを最初のスライドに戻します。

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

1. 前へボタン: スライド インデックスを 1 つ減らしますが、0 (最初のスライド) を下回ることはありません。

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

1. 次へボタン: スライド インデックスを 1 つ増やしますが、最後のスライドを超えないようにしてください。

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

ボタンの無効化

ユーザーが最初のスライドを表示している場合は「前へ」ボタンと「再開」ボタンが無効になり、最後のスライドを表示している場合は「次へ」ボタンが無効になります。

<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>

スライドコンテンツのレンダリング

コンポーネントは、currentSlideIndex 狀態(tài)を使用して現(xiàn)在のスライドのタイトルとテキストをレンダリングします。

<div>



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

<p>このシンプルかつ効果的なスライド ナビゲーション コンポーネントは、UI 狀態(tài)を管理するための React の useState の力を示しています。動的な狀態(tài)とイベント処理を使用することで、ユーザーが使いやすい方法でスライドを操作できる柔軟なコンポーネントを作成しました。アニメーションや自動スライド遷移などの機能を追加して、このコンポーネントを拡張できます。</p>


          </div>

            
        

以上がReact.js でページネーションを行う方法 再起動、前へ、次への詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。