Catatan Blog: Membina Komponen Navigasi Slaid Mudah dalam React

Dalam siaran ini, kami akan meneruskan penciptaan komponen navigasi slaid asas dalam React. Komponen ini membolehkan pengguna menavigasi melalui satu siri slaid menggunakan butang "Mulakan Semula", "Sebelumnya" dan "Seterusnya". Kami akan menguruskan indeks slaid semasa menggunakan cangkuk useState React dan memastikan bahawa butang dilumpuhkan apabila sesuai (cth., pada permulaan atau penghujung dek slaid).

Gambaran Keseluruhan Kod

Komponen Slaid menerima susunan slaid sebagai penyangga. Setiap slaid mengandungi tajuk dan beberapa teks. Butang navigasi membolehkan pengguna bergerak ke hadapan dan ke belakang melalui slaid, dan butang "Mulakan Semula" membawa pengguna kembali ke slaid pertama.

Mengurus Negeri dengan useState

Kami menggunakan cangkuk useState untuk mengurus indeks slaid semasa:

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

Keadaan ini menjejaki slaid yang sedang dipaparkan. Kami bermula pada slaid 0 dan mengemas kini nilai ini apabila pengguna mengklik pada butang "Sebelumnya", "Seterusnya" atau "Mulakan Semula".

Mengendalikan Klik Butang

Kami mentakrifkan tiga fungsi untuk mengendalikan kelakuan setiap butang:

1. Butang Mulakan Semula: Menetapkan semula indeks slaid semasa kepada 0, membawa pengguna kembali ke slaid pertama.

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

1. Butang Sebelumnya: Mengurangkan indeks slaid sebanyak 1, tetapi memastikan ia tidak pernah turun di bawah 0 (slaid pertama).

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

1. Butang Seterusnya: Meningkatkan indeks slaid sebanyak 1, tetapi memastikan ia tidak melepasi slaid terakhir.

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

Melumpuhkan Butang

Kami melumpuhkan butang "Sebelumnya" dan "Mulakan Semula" apabila pengguna melihat slaid pertama, dan butang "Seterusnya" dinyahdayakan apabila pengguna melihat slaid terakhir:

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

Memaparkan Kandungan Slaid

Komponen memaparkan tajuk dan teks slaid semasa menggunakan keadaan SlideIndex semasa:

<div>



<h4>
  
  
  Kesimpulan
</h4>

<p>Komponen navigasi slaid yang ringkas namun berkesan ini menunjukkan kuasa useState React untuk mengurus keadaan UI. Dengan menggunakan keadaan dinamik dan pengendalian peristiwa, kami telah mencipta komponen fleksibel yang membolehkan pengguna berinteraksi dengan slaid dengan cara yang mesra pengguna. Anda boleh melanjutkan komponen ini dengan menambahkan ciri seperti animasi atau peralihan auto-slaid.</p>


          

            
        

Atas ialah kandungan terperinci Cara membuat penomboran dalam react.js Mulakan Semula, Sebelum, Seterusnya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!