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

14-may, 20243 daqiqalik mutolaastatik

React Hook FormReactFrontend dasturlashVeb-dasturlash

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.

import { 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.

import { 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.

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

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

import { 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:

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

Bogʻliq loyiha keysi

Dominion Legist yuridik platformasi

Dominion Legist ni yuridik CMS dan xizmatlarni tushunish, kompaniyani baholash, huquqiy tavsiyalarni oʻqish va maxfiy maslahatni boshlash uchun koʻp tilli mijoz platformasiga aylantirdim.

Oltita huquqiy amaliyot yoʻnalishini oʻzbek, ingliz va rus tillarida tushunarli, qaror qabul qilishga yordam beradigan xizmat yoʻllari sifatida qayta tuzdim.
Ochiq brend, asoschi profili, huquqiy nashrlar, tez-tez soʻraladigan savollar va maxfiy murojaat jarayonini bitta platformada birlashtirdim.

Loyihani boshlash

Loyihangizga shunday mahsulot tafakkuri kerakmi?

Mahsulotni shakllantirib, interfeys, tizim va takomillashtirish jarayonini ishga tushira oladigan mutaxassis kerak boʻlsa, bogʻlaning.

Hamkorlik qilish