useStep
useStep hooki, multi-qadamli shakllar, sehrgarlar yoki darslar kabi qadamli jarayonlarni boshqarish uchun mo'ljallangan maxsus React hookidir.
useStep
Hook
Umumiy Ma'lumot
useStep
hooki, multi-qadamli shakllar, sehrgarlar yoki darslar kabi qadamli jarayonlarni boshqarish uchun mo'ljallangan maxsus React hookidir. Bu qadamlar bo'yicha oson navigatsiyani ta'minlaydi, hozirgi qadamni nazorat qilish va ularni osonlik bilan o'zgartirish imkonini beradi.
O'rnatish
npm install @udemere/usehooks
Foydalanish
useStep
hookidan foydalanish uchun uni komponentingizga import qiling va jarayon qadamlarini boshqarish uchun chaqiring.
import React from 'react'
import { useStep } from '@udemere/usehooks'
const StepComponent: React.FC = () => {
const { currentStep, nextStep, prevStep, reset } = useStep({ totalSteps: 3 })
return (
<div>
<h2>Hozirgi Qadam: {currentStep + 1}</h2>
<div>
<button onClick={prevStep} disabled={currentStep === 0}>
O'tgan
</button>
<button onClick={nextStep} disabled={currentStep === 2}>
Keyingi
</button>
</div>
<button onClick={reset}>Qayta Tiklash</button>
</div>
)
}
export default StepComponent
API
-
Parametrlar:
options
: Qadamlarni boshqarish uchun konfiguratsiya qiluvchi ob'ekt.initialStep
(ixtiyoriy): Dastlabki qadam indeksini belgilovchi raqam (standart0
).totalSteps
: Jami qadamlar sonini belgilovchi raqam.
-
Qaytadi: Quyidagi xususiyatlar va usullarni o'z ichiga olgan ob'ekt:
currentStep
: Hozirgi qadam indeks (nolga asoslangan).nextStep
: Keyingi qadamga o'tish uchun funksiya. U oxirgi qadamdan o‘tkazishni oldini oladi.prevStep
: O'tgan qadamga qaytish uchun funksiya. U birinchi qadamdan oldin o'tishni oldini oladi.reset
: Hozirgi qadamni dastlabki qadamga qaytarish uchun funksiya.
Misol
useStep
hookidan multi-qadamli shakl komponentida qanday foydalanishni ko'rsatadigan misol:
import React from 'react'
import { useStep } from '@udemere/usehooks'
const MultiStepForm: React.FC = () => {
const { currentStep, nextStep, prevStep, reset } = useStep({ totalSteps: 3 })
return (
<div>
{currentStep === 0 && <div>Qadam 1: Foydalanuvchi Ma'lumotlari</div>}
{currentStep === 1 && <div>Qadam 2: Manzil Ma'lumotlari</div>}
{currentStep === 2 && <div>Qadam 3: Tasdiqlash</div>}
<div>
<button onClick={prevStep} disabled={currentStep === 0}>
O'tgan
</button>
<button onClick={nextStep} disabled={currentStep === 2}>
Keyingi
</button>
</div>
<button onClick={reset}>Qayta Tiklash</button>
</div>
)
}
export default MultiStepForm
Eslatmalar
useStep
hooki ichki holatini boshqaradi, bu esa uni bir nechta komponentlarda mustaqil ravishda ishlatish imkonini beradi.- Ushbu hook, shakllar, sehrgarlar yoki qadamli UI o'zaro ta'siri uchun foydalidir, bu erda foydalanuvchining qadamlar bo'yicha rivojlanishini kuzatish kerak.