웹 프론트엔드 JS 튜토리얼 React.js에서 페이지 매김을 만드는 방법 다시 시작, 이전, 다음

React.js에서 페이지 매김을 만드는 방법 다시 시작, 이전, 다음

Nov 27, 2024 am 05:49 AM

How to make pagination in react.js Restart, Prev, Next

블로그 게시물: React에서 간단한 슬라이드 탐색 구성 요소 구축

이 게시물에서는 React에서 기본 슬라이드 탐색 구성 요소를 만드는 방법을 살펴보겠습니다. 이 구성 요소를 사용하면 사용자는 "다시 시작", "이전" 및 "다음" 버튼을 사용하여 일련의 슬라이드를 탐색할 수 있습니다. React의 useState 후크를 사용하여 현재 슬라이드 인덱스를 관리하고 적절한 경우(예: 슬라이드 데크의 시작 또는 끝에서) 버튼이 비활성화되었는지 확인합니다.

강령 개요

Slides 구성요소는 소품으로 슬라이드 배열을 받습니다. 각 슬라이드에는 제목과 일부 텍스트가 포함되어 있습니다. 탐색 버튼을 사용하면 슬라이드에서 앞뒤로 이동할 수 있으며, '다시 시작' 버튼을 사용하면 첫 번째 슬라이드로 돌아갈 수 있습니다.

useState를 사용하여 상태 관리

useState 후크를 사용하여 현재 슬라이드 인덱스를 관리합니다.

const [currentSlideIndex, setCurrentSlideIndex] = useState(0);
로그인 후 복사

이 상태는 현재 표시된 슬라이드를 추적합니다. 슬라이드 0에서 시작하여 사용자가 "이전", "다음" 또는 "다시 시작" 버튼을 클릭하면 이 값을 업데이트합니다.

버튼 클릭 처리

각 버튼의 동작을 처리하는 세 가지 기능을 정의합니다.

  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>


          

            
        
로그인 후 복사

위 내용은 React.js에서 페이지 매김을 만드는 방법 다시 시작, 이전, 다음의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

JavaScript로 문자열 문자를 교체하십시오 JavaScript로 문자열 문자를 교체하십시오 Mar 11, 2025 am 12:07 AM

JavaScript로 문자열 문자를 교체하십시오

jQuery 날짜가 유효한지 확인하십시오 jQuery 날짜가 유효한지 확인하십시오 Mar 01, 2025 am 08:51 AM

jQuery 날짜가 유효한지 확인하십시오

jQuery는 요소 패딩/마진을 얻습니다 jQuery는 요소 패딩/마진을 얻습니다 Mar 01, 2025 am 08:53 AM

jQuery는 요소 패딩/마진을 얻습니다

10 JQuery 플러그인을 확인할 가치가 있습니다 10 JQuery 플러그인을 확인할 가치가 있습니다 Mar 01, 2025 am 01:29 AM

10 JQuery 플러그인을 확인할 가치가 있습니다

10 JQuery Accordions 탭 10 JQuery Accordions 탭 Mar 01, 2025 am 01:34 AM

10 JQuery Accordions 탭

노드 및 HTTP 콘솔로 HTTP 디버깅 노드 및 HTTP 콘솔로 HTTP 디버깅 Mar 01, 2025 am 01:37 AM

노드 및 HTTP 콘솔로 HTTP 디버깅

사용자 정의 Google 검색 API 설정 자습서 사용자 정의 Google 검색 API 설정 자습서 Mar 04, 2025 am 01:06 AM

사용자 정의 Google 검색 API 설정 자습서

jQuery div에 스크롤 바를 추가합니다 jQuery div에 스크롤 바를 추가합니다 Mar 01, 2025 am 01:30 AM

jQuery div에 스크롤 바를 추가합니다

See all articles