So erstellen Sie eine Paginierung in React.js Neustart, Zurück, Weiter

Blogbeitrag: Erstellen einer einfachen Foliennavigationskomponente in React

In diesem Beitrag gehen wir Schritt für Schritt durch die Erstellung einer grundlegenden Foliennavigationskomponente in React. Mit dieser Komponente können Benutzer mithilfe der Schaltflächen „Neustart“, „Zurück“ und „Weiter“ durch eine Reihe von Folien navigieren. Wir verwalten den aktuellen Folienindex mithilfe des useState-Hooks von React und stellen sicher, dass die Schaltflächen bei Bedarf deaktiviert sind (z. B. am Anfang oder Ende des Foliendecks).

Übersicht über den Kodex

Die Slides-Komponente erhält eine Reihe von Folien als Requisite. Jede Folie enthält einen Titel und etwas Text. Mit den Navigationsschaltflächen kann der Benutzer vorwärts und rückwärts durch die Folien navigieren, und die Schaltfläche „Neustart“ bringt den Benutzer zurück zur ersten Folie.

Verwalten des Status mit useState

Wir verwenden den useState-Hook, um den aktuellen Folienindex zu verwalten:

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

Dieser Status verfolgt die aktuell angezeigte Folie. Wir beginnen bei Folie 0 und aktualisieren diesen Wert, wenn Benutzer auf die Schaltflächen „Zurück“, „Weiter“ oder „Neustart“ klicken.

Umgang mit Schaltflächenklicks

Wir definieren drei Funktionen, um das Verhalten jeder Schaltfläche zu verwalten:

1. Neustart-Schaltfläche: Setzt den aktuellen Folienindex auf 0 zurück und bringt den Benutzer zurück zur ersten Folie.

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

1. Vorherige Schaltfläche: Verringert den Folienindex um 1, stellt jedoch sicher, dass er niemals unter 0 fällt (die erste Folie).

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

1. Weiter-Schaltfläche: Erhöht den Folienindex um 1, stellt jedoch sicher, dass er nicht über die letzte Folie hinausgeht.

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

Tasten deaktivieren

Wir deaktivieren die Schaltflächen „Zurück“ und „Neustart“, wenn der Benutzer die erste Folie ansieht, und die Schaltfläche „Weiter“ ist deaktiviert, wenn der Benutzer die letzte Folie ansieht:

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

Rendern des Folieninhalts

Die Komponente rendert den Titel und Text der aktuellen Folie unter Verwendung des aktuellenSlideIndex-Status:

<div>



<h4>
  
  
  Abschluss
</h4>

<p>Diese einfache, aber effektive Foliennavigationskomponente demonstriert die Leistungsfähigkeit von Reacts useState zur Verwaltung des UI-Status. Durch den Einsatz dynamischer Zustands- und Ereignisbehandlung haben wir eine flexible Komponente geschaffen, die es Benutzern ermöglicht, auf benutzerfreundliche Weise mit den Folien zu interagieren. Sie können diese Komponente erweitern, indem Sie Funktionen wie Animationen oder automatische Folienübergänge hinzufügen.</p>


          

            
        

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine Paginierung in React.js Neustart, Zurück, Weiter. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!