Կպատմեք ինձ React Hook Form-ի մասին՝ հիմնական հնարավորություններ, ինչպես է օգտագործվում, ինչպես է աշխատում վավերացումը?

React Hook Form — React-ում ձևերի կառավարելու գրադարան է, որը օգտագործում է hook-եր ձևի վիճակի պարզ և արդյունավետ վերահսկման համար:

Հիմնական հնարավորություններ՝

• Ֆորմայի վիճակի կառավարում առանց վերահսկվող կոմպոնենտներ ստեղծելու անհրաժեշտության:
• Վավերացման աջակցություն սքեմաների վրա հիմնված (օրինակ՝ Yup-ի հետ) կամ ներքին կանոնների միջոցով:
• Կատարյալ նվազագույն վերաարտադրման համար՝ բարելավելու համար կատարողականությունը:
• Հեշտ ինտեգրում UI գրադարանների հետ:

Օգտագործում՝

import { useForm } from 'react-hook-form';

function MyForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();

  const onSubmit = data => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('username', { required: 'Պետք է անուն' })} />
      {errors.username && <p>{errors.username.message}</p>}

      <input type="submit" />
    </form>
  );
}

Վավերացումը աշխատում է register ֆունկցիային փոխանցված կանոնների կամ արտաքին սքեմաների միջոցով: Ուղարկման ժամանակ, handleSubmit ստուգում է տվյալները, և եթե սխալներ կան, դրանք հասանելի են formState.errors-ում: Սա հեշտացնում է սխալի հաղորդագրությունների ցուցադրումը և ձևի ուղարկումը խոչընդոտելը սխալ տվյալների դեպքում։