react-hook-form का उपयोग
In this page:
const { register, handleSubmit, formState: { errors } } = useForm();
<form onSubmit={handleSubmit(onSubmit)}>
<input {...register("fieldName", { required: "Message" })} />
{errors.fieldName && <p>{errors.fieldName.message}</p>}
</form>एक Form Library क्यों उपयोग करें
कई fields वाले forms के लिए, हर single एक के लिए एक useState और onChange handler लिखना repetitive हो जाता है और हर keystroke पर unnecessary re-renders cause कर सकता है। react-hook-form uncontrolled inputs उपयोग करके internally सभी field state manage करता है, एक simple register() function expose करते हुए।
उदाहरण: Why Use a Form Library
// Run in your local React project (npm install required)
import { useForm } from 'react-hook-form';
function App() {
const { register, handleSubmit } = useForm();
const onSubmit = data => console.log(data);
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input {...register('email')} placeholder="Email" />
<button type="submit">Submit</button>
</form>
);
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
register() के साथ Inputs Register करना
register(fieldName) call करना वे props (ref, onChange, onBlur, name) return करता है जो form द्वारा track होने के लिए एक input को चाहिए होते हैं, आपके हाथ से लिखे बिना। इसके return value को एक <input> पर spread करना उस field को automatically form में wire करता है।
उदाहरण: Registering Inputs with register()
// Run in your local React project (npm install required)
import { useForm } from 'react-hook-form';
function App() {
const { register, handleSubmit } = useForm();
return (
<form onSubmit={handleSubmit(data => console.log(data))}>
<input {...register('username', { required: true })} />
<input {...register('age', { min: 18 })} type="number" />
<button type="submit">Submit</button>
</form>
);
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
formState से Validation Errors पढ़ना
जब आप register() में validation rules जोड़ते हैं, react-hook-form automatically formState.errors में कोई भी failures track करता है, field name से keyed।
formState.errors को register और handleSubmit के साथ destructure करना inline error messages दिखाने के लिए ज़रूरी सब कुछ देता है।
उदाहरण: Reading Validation Errors from formState
// Run in your local React project (npm install required)
import { useForm } from 'react-hook-form';
function App() {
const { register, handleSubmit, formState: { errors } } = useForm();
return (
<form onSubmit={handleSubmit(data => console.log(data))}>
<input {...register('email', { required: 'Email is required' })} />
{errors.email && <p>{errors.email.message}</p>}
<button type="submit">Submit</button>
</form>
);
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
- Input पर {...register(fieldName)} spread करना भूल जाना, जो इसे form की tracking से disconnect करता है।
- react-hook-form के uncontrolled approach को same field के लिए manual useState के साथ mix करना।
- formState से errors न पढ़ना, इसलिए validation messages कभी नहीं दिखते।
- react-hook-form internally uncontrolled inputs और refs उपयोग करके form state manage करता है, re-renders minimize करते हुए।
- register() function per field useState की ज़रूरत के बिना एक input को form में wire करता है।
- handleSubmit आपके submit function को wrap करता है और सिर्फ validation pass होने पर इसे call करता है।
- formState.errors field name से keyed validation messages रखता है।
npm install react-hook-form चाहिए — इस sandbox में CDN से available नहीं; React 16.8+ (internally hooks उपयोग करता है) के साथ काम करता है।
Chapter Quiz — Complete all 8 topics to unlock
0/8 topics done
Complete these topics first: