Handle Form in ReactJS In Hindi

📔 : ReactJS 🔗

ReactJS में form handling एक important concept है, जो user inputs को handle करने और data को efficiently manage करने में help करता है

Forms React applications को interactive बनाते हैं, जिसमे users text fields, radio buttons, checkboxes, और dropdown menus के through data enter कर सकते हैं।

React में forms को handle करने का unique approach है क्योंकि यहां हर input field React state के साथ synchronize होता है।

इस topic में हम देखेंगे कि React में forms कैसे handle किये जाते हैं, controlled और uncontrolled components के concepts, और कैसे different form elements जैसे text input, textarea, radio buttons, checkboxes, और dropdowns को efficiently manage किया जाये।

Form Handling Basics In React

React में form handling के लिए controlled components का concept use होता है। यह components input कि value को React कि state के साथ synchronize रखते हैं।

जब भी input कि value change होती है, तो state भी update होती है और input field कि latest value display होती है।

ReactJs Controlled Components

Controlled components वो होते हैं जिनके input values React state के साथ controlled होते हैं। मतलब, input कि हर change React component कि state के साथ synchronize होती है।

Example of a Controlled Component

File : src/components/SimpleForm.js

// SimpleForm.js import React, { useState } from 'react'; function SimpleForm() { const [name, setName] = useState(''); const handleChange = (event) => { setName(event.target.value); }; const handleSubmit = (event) => { event.preventDefault(); alert(`Hello, ${name}!`); }; return ( <form onSubmit={handleSubmit}> <label> Name: <input type="text" value={name} onChange={handleChange} /> </label> <button type="submit">Submit</button> </form> ); } export default SimpleForm;
Explanation
  • handleChange function input कि value को name state के साथ update करता है।

  • handleSubmit function form के submit hone पर alert display करता है और event.preventDefault() के through form के default reload behavior को prevent करता है।

Handle Multiple Inputs

अगर form में multiple input fields हो तो हम एक common handleChange function का use करके सारे inputs को handle कर सकते हैं।

Example of Handling Multiple Inputs

File : src/components/UserForm.js

import React, { useState } from 'react'; function UserForm() { const [formData, setFormData] = useState({ firstName: '', lastName: '', email: '' }); const handleChange = (event) => { const { name, value } = event.target; setFormData({ ...formData, [name]: value }); }; const handleSubmit = (event) => { event.preventDefault(); alert(`Hello, ${formData.firstName} ${formData.lastName}! Your email is ${formData.email}`); }; return ( <form onSubmit={handleSubmit}> <label> First Name: <input type="text" name="firstName" value={formData.firstName} onChange={handleChange} /> </label> <br /> <label> Last Name: <input type="text" name="lastName" value={formData.lastName} onChange={handleChange} /> </label> <br /> <label> Email: <input type="email" name="email" value={formData.email} onChange={handleChange} /> </label> <br /> <button type="submit">Submit</button> </form> ); } export default UserForm;
Explanation
  • formData object state में सारी input fields को manage कर रहा है।

  • handleChange function input के name और value को destructure करके formData object में update कर रहा है।

  • handleSubmit function form submit hone पर user data को alert message में display करता है।

ReactJs Handling Textarea, Select, and Radio Buttons

React में textarea, select, और radio buttons भी controlled components कि तरह ही handle होते हैं।

ReactJs Textarea Example

Location : src/components/TextAreaForm.js

import React, { useState } from 'react'; function TextAreaForm() { const [message, setMessage] = useState(''); const handleChange = (event) => { setMessage(event.target.value); }; const handleSubmit = (event) => { event.preventDefault(); alert(`Your message: ${message}`); }; return ( <form onSubmit={handleSubmit}> <label> Message: <textarea value={message} onChange={handleChange} /> </label> <button type="submit">Submit</button> </form> ); } export default TextAreaForm;

Textarea कि value को state message के साथ synchronize किया गया है जो handleChange के through update होता है।

ReactJs Select Example

Location : src/components/SelectForm.js

import React, { useState } from 'react'; function SelectForm() { const [color, setColor] = useState('red'); const handleChange = (event) => { setColor(event.target.value); }; const handleSubmit = (event) => { event.preventDefault(); alert(`Your selected color: ${color}`); }; return ( <form onSubmit={handleSubmit}> <label> Pick your favorite color: <select value={color} onChange={handleChange}> <option value="red">Red</option> <option value="blue">Blue</option> <option value="green">Green</option> </select> </label> <button type="submit">Submit</button> </form> ); } export default SelectForm;

select element कि value color state के साथ controlled है और handleChange के साथ update होती है।

ReactJs Radio Button Example

Location : src/components/RadioForm.js

import React, { useState } from 'react'; function RadioForm() { const [gender, setGender] = useState(''); const handleChange = (event) => { setGender(event.target.value); }; const handleSubmit = (event) => { event.preventDefault(); alert(`Selected gender: ${gender}`); }; return ( <form onSubmit={handleSubmit}> <label> Male <input type="radio" value="male" checked={gender === 'male'} onChange={handleChange} /> </label> <label> Female <input type="radio" value="female" checked={gender === 'female'} onChange={handleChange} /> </label> <button type="submit">Submit</button> </form> ); } export default RadioForm;

checked attribute के through radio buttons को current selected value के साथ sync किया गया है।

ReactJs Checkbox Example

Checkbox handling भी similar है लेकिन ये boolean value hold करता है।

Location : src/components/CheckboxForm.js

import React, { useState } from 'react'; function CheckboxForm() { const [isAgreed, setIsAgreed] = useState(false); const handleChange = (event) => { setIsAgreed(event.target.checked); }; const handleSubmit = (event) => { event.preventDefault(); alert(`Agreement status: ${isAgreed ? 'Agreed' : 'Not Agreed'}`); }; return ( <form onSubmit={handleSubmit}> <label> Agree to terms: <input type="checkbox" checked={isAgreed} onChange={handleChange} /> </label> <button type="submit">Submit</button> </form> ); } export default CheckboxForm;

Checkbox के checked attribute को isAgreed state के साथ sync किया गया है और toggle करने पर update होता है।

ReactJs Uncontrolled Components

Uncontrolled components वो होते हैं जिसमें data React state में save नहीं होता, बल्कि HTML DOM के अंदर रहता है। ऐसे components में हम Refs का use करके direct DOM elements को access करते हैं।

Example of Uncontrolled Component

Location : src/components/UncontrolledForm.js

import React, { useRef } from 'react'; function UncontrolledForm() { const nameRef = useRef(null); const handleSubmit = (event) => { event.preventDefault(); alert(`Name entered: ${nameRef.current.value}`); }; return ( <form onSubmit={handleSubmit}> <label> Name: <input type="text" ref={nameRef} /> </label> <button type="submit">Submit</button> </form> ); } export default UncontrolledForm;

useRef का use करके nameRef create किया गया है जो input field को direct access करता है बिना React state के।

ReactJs Form Validation Example

Form validation React में easily implement किया जा सकता है। इसमें हम conditions set करके inputs को validate करते हैं।

Location : src/components/ValidatedForm.js

import React, { useState } from 'react'; function ValidatedForm() { const [email, setEmail] = useState(''); const [error, setError] = useState(''); const handleChange = (event) => { setEmail(event.target.value); }; const handleSubmit = (event) => { event.preventDefault(); if (!email.includes('@')) { setError('Invalid email format'); } else { setError(''); alert(`Email submitted: ${email}`); } }; return ( <form onSubmit={handleSubmit}> <label> Email: <input type="email" value={email} onChange={handleChange} /> </label> <button type="submit">Submit</button> {error && <p style={{ color: 'red' }}>{error}</p>} </form> ); } export default ValidatedForm;

handleSubmit function में validation check किया गया है कि email में @ symbol है या नहीं , अगर नहीं है तो error message display होता है।

आपको अब Idea आ गया होगा कि ReactJs में forms को कैसे handle करते हैं , next हम discuss करेंगे कैसे form को ajax के through submit किया जाता है।

Happy coding! 🎉

Hey ! I'm Rahul founder of learnhindituts.com. Working in IT industry more than 4.5 years. I love to talk about programming as well as writing technical tutorials and blogs that can help to others .... keep learning :)

Get connected with me - LinkedIn Twitter Instagram Facebook