React.js でページネーションを行う方法 再起動、前へ、次へ

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

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

コードの概要

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

useState による状態の管理

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

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

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

ボタンのクリックの処理

各ボタンの動作を処理する 3 つの関数を定義します。

1. 再開ボタン: 現在のスライド インデックスを 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 状態を使用して現在のスライドのタイトルとテキストをレンダリングします。

<div>



<h4>
  
  
  結論
</h4>

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


          </div>

            
        

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