Comment faire une pagination dans React.js Redémarrer, Précédent, Suivant

Article de blog : Création d'un composant de navigation de diapositives simple dans React

Dans cet article, nous expliquerons la création d'un composant de base de navigation dans les diapositives dans React. Ce composant permet aux utilisateurs de naviguer dans une série de diapositives à l'aide des boutons « Redémarrer », « Précédent » et « Suivant ». Nous gérerons l'index des diapositives actuel à l'aide du hook useState de React et veillerons à ce que les boutons soient désactivés le cas échéant (par exemple, au début ou à la fin du diaporama).

Aperçu du code

Le composant Slides reçoit un tableau de diapositives comme accessoire. Chaque diapositive contient un titre et du texte. Les boutons de navigation permettent à l'utilisateur d'avancer et de reculer dans les diapositives, et le bouton "Redémarrer" ramène l'utilisateur à la première diapositive.

Gestion de l'état avec useState

Nous utilisons le hook useState pour gérer l'index de la diapositive actuelle :

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

Cet état assure le suivi de la diapositive actuellement affichée. Nous commençons à la diapositive 0 et mettons à jour cette valeur lorsque les utilisateurs cliquent sur les boutons « Précédent », « Suivant » ou « Redémarrer ».

Gestion des clics sur les boutons

Nous définissons trois fonctions pour gérer le comportement de chaque bouton :

1. Bouton de redémarrage : réinitialise l'index de la diapositive actuelle à 0, ramenant l'utilisateur à la première diapositive.

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

1. Bouton Précédent : diminue l'index de la diapositive de 1, mais garantit qu'il ne descend jamais en dessous de 0 (la première diapositive).

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

1. Bouton Suivant : augmente l'index de la diapositive de 1, mais garantit qu'il ne dépasse pas la dernière diapositive.

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

Désactivation des boutons

Nous désactivons les boutons « Précédent » et « Redémarrer » lorsque l'utilisateur visualise la première diapositive, et le bouton « Suivant » est désactivé lorsque l'utilisateur visualise la dernière diapositive :

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

Rendu du contenu de la diapositive

Le composant restitue le titre et le texte de la diapositive actuelle en utilisant l'état currentSlideIndex :

<div>



<h4>
  
  
  Conclusion
</h4>

<p>Ce composant de navigation par diapositives simple mais efficace démontre la puissance de useState de React pour gérer l'état de l'interface utilisateur. En utilisant la gestion dynamique des états et des événements, nous avons créé un composant flexible qui permet aux utilisateurs d'interagir avec les diapositives de manière conviviale. Vous pouvez étendre ce composant en ajoutant des fonctionnalités telles que des animations ou des transitions de glissement automatique.</p>


          

            
        

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!