React Hook Form bilan qayta foydalaniladigan komponentlar yaratish boʻyicha bosqichma-bosqich qoʻllanma

React Hook Form React ilovalarida shakllar bilan ishlashni soddalashtiradigan kuchli kutubxonadir. Qayta foydalaniladigan shakl komponentlari ishlab chiqish jarayonini tezlashtiradi va barcha shakllarda izchillikni taʼminlaydi. Oldingi maqolada React Hook Form dan foydalanishning afzalliklarini tushuntirdim. Oʻrnatish haqida boshqa koʻplab qoʻllanmalar mavjud, shu sababli bu safar yetarlicha yoritilmagan mavzu — qayta foydalaniladigan komponentlar orqali undan foydalanishni koʻrsataman.

1-bosqich: FormProvider ni sozlash

React Hook Form dan foydalanish uchun shakl komponentlarini FormProvider bilan oʻrash kerak. Shunda komponentlar shakl kontekstiga kira oladi va oʻz maydonlarini roʻyxatdan oʻtkazadi.

copyimport { FormProvider } from 'react-hook-form';

export default function MyForm() {
  const methods = useForm();
  return (
    <FormProvider {...methods}>
      {/* Your form components go here */}
    </FormProvider>
  );
}

2-bosqich: Qayta foydalaniladigan input komponentini yaratish

React Hook Form ning afzalliklaridan biri qayta foydalaniladigan input komponentlarini yaratishdir. Quyida InputField misoli berilgan.

copyimport { useFormContext } from 'react-hook-form';

function InputField({ name, label, type, required, ...rest }) {

  const { register, formState: { errors } } = useFormContext();
  const error = errors[name]?.message;
  return (
    <div className={`input-wrapper ${error ? 'has-error' : ''}`}>
      <label htmlFor={name}>{label}</label>
      <input
        type={type || 'text'}
        {...register(name, { required: required })}
        {...rest}
      />
      {error && <p className="error-message">{error}</p>}
    </div>
  );
}

3-bosqich: Qayta foydalaniladigan komponentni ishlatish

Endi yaratilgan InputField komponentini shaklda ishlatamiz.

copyimport InputForm from './InputForm';

function MyForm() {
  // ...
  return (
    <FormProvider {...methods}>
      <InputField
        name="name"
        label="Name"
        placeholder="Enter your name"
        required="Name is required"
      />
      <InputField
        name="email"
        label="Email"
        placeholder="Enter your email"
        type="email"
        required="Email is required"
      />
      {/* Other form fields */}
    </FormProvider>
  );
}

4-bosqich: Shakl yuborilishini boshqarish

Shakl yuborilishini React Hook Form taqdim etadigan handleSubmit funksiyasi orqali boshqarish mumkin.

copyfunction MyForm() {
  const methods = useForm();
  const { handleSubmit } = methods;

const onSubmit = (data) => {
    // Handle form submission
    console.log(data);
  };
  return (
    <FormProvider {...methods}>
      {/* Form fields */}
      <button type="submit">Submit</button>
    </FormProvider>
  );
}

5-bosqich: Maydon validatsiyasi

React Hook Form tayyor validatsiya qoidalari va maxsus validatsiya funksiyalarini qoʻllab-quvvatlaydi. Quyidagi misolda required va validate parametrlaridan foydalaniladi.

copyimport { useFormContext } from 'react-hook-form';

function InputField({ name, label, type, required, validate, ...rest }) {
  const { register, formState: { errors } } = useFormContext();
  const error = errors[id]?.message;
  return (
    <div className={`input-wrapper ${error ? 'has-error' : ''}`}>
      <label htmlFor={name}>{label}</label>
      <input
        type={type || 'text'}
        {...register(name, { required: required, validate: validate })}
        {...rest}
      />
      {error && <p className="error-message">{error}</p>}
    </div>
  );
}

Bu yerda register funksiyasiga required va validate beriladi. required maydon majburiyligini belgilaydi. validate esa maydon toʻgʻri boʻlsa true, aks holda false qaytaradigan maxsus funksiyani yozish imkonini beradi.

Validatsiya bilan InputField ishlatish misoli:

copyfunction MyForm() {
  // ...

const validateEmail = (value) => {
    // Custom email validation logic
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(value) || 'Invalid email format';
  };
  return (
    <FormProvider {...methods}>
      <InputField
        name="email"
        label="Email"
        placeholder="Enter your email"
        type="email"
        required="Email is required"
        validate={validateEmail}
      />
      {/* Other form fields */}
    </FormProvider>
  );
}

React Hook Form faqat matn maydonlarini emas, radio tugmalari, checkboxlar va fayl inputlari kabi boshqa turdagi maydonlarni ham qoʻllab-quvvatlaydi. U boshqariladigan va boshqarilmaydigan komponentlar bilan murakkab holatlarda ham ishlaydi. Zarur boʻlsa, keyingi maqolada aniqroq va rivojlangan foydalanish misollarini yozaman.