If tutorials available on this website are helpful for you, please whitelist this website in your ad blocker😭 or Donate to help us ❤️ pay for the web hosting to keep the website running.
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 किया जाये।
●●●
React में form handling के लिए controlled components का concept use होता है। यह components input कि value को React कि state के साथ synchronize रखते हैं।
जब भी input कि value change होती है, तो state भी update होती है और input field कि latest value display होती है।
Controlled components वो होते हैं जिनके input values React state के साथ controlled होते हैं। मतलब, input कि हर change React component कि state के साथ synchronize होती है।
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; handleChange function input कि value को name state के साथ update करता है।
handleSubmit function form के submit hone पर alert display करता है और event.preventDefault() के through form के default reload behavior को prevent करता है।
●●●
अगर form में multiple input fields हो तो हम एक common handleChange function का use करके सारे inputs को handle कर सकते हैं।
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; 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 करता है।
●●●
React में textarea, select, और radio buttons भी controlled components कि तरह ही handle होते हैं।
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 होता है।
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 होती है।
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 किया गया है।
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 होता है।
●●●
Uncontrolled components वो होते हैं जिसमें data React state में save नहीं होता, बल्कि HTML DOM के अंदर रहता है। ऐसे components में हम Refs का use करके direct DOM elements को access करते हैं।
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 के।
●●●
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! 🎉