React में Forms के साथ काम करना
React में एक form एक paper form fill करने जैसा है, सिवाय इसके कि React आपके type किए हर letter को watch करता है और उसे instantly याद रखता है।
In this page:
Syntax
const [value, setValue] = useState("");
function handleSubmit(e) {
e.preventDefault();
// use value
}
<form onSubmit={handleSubmit}>
<input value={value} onChange={e => setValue(e.target.value)} />
</form>React में Forms को Special Handling की ज़रूरत क्यों है
Plain HTML में, browser form input values खुद manage करता है। React में, आप आमतौर पर चाहते हैं कि input की value इसके बजाय state में रहे, ताकि component इसे पढ़ सके, validate कर सके, या user के type करते समय react कर सके। यही है जो एक form को React-controlled बनाता है।
Note:
Simple से शुरू करें: छोटे forms के लिए per field एक useState ठीक है।
Warning:
एक ही form में uncontrolled inputs (कोई value prop नहीं) को controlled वालों के साथ mix न करें — per input एक style चुनें।
उदाहरण: Why Forms Need Special Handling in React
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function App() {
const [name, setName] = React.useState("");
return <input value={name} onChange={e => setName(e.target.value)} placeholder="Your name" />;
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>Form Submission Handle करना
<form> element का onSubmit event तब fire होता है जब user Enter दबाता है या एक submit button click करता है। इसके अंदर event.preventDefault() call करना page reload करने के browser के default behavior को रोकता है, आपके JavaScript को submitted data handle करने देते हुए।
Note:
हमेशा event का target handler के अंदर destructure या read करें, किसी external ref से नहीं, handler को pure रखने के लिए।
Warning:
preventDefault() भूल जाना पूरे page को reload करवाता है, आपकी कोई भी React state wipe out करते हुए।
उदाहरण: Handling Form Submission
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function App() {
const [name, setName] = React.useState("");
const handleSubmit = e => { e.preventDefault(); alert("Submitted: " + name); };
return (
<form onSubmit={handleSubmit}>
<input value={name} onChange={e => setName(e.target.value)} />
<button type="submit">Submit</button>
</form>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>एक साथ कई Fields Manage करना
कई fields वाले forms के लिए, सभी को एक state object में store करना (per field एक useState के बजाय) चीज़ों को organized रखता है। एक single handleChange function input के name attribute का उपयोग करके सही field update कर सकता है।
Note:
यह देखने के लिए input के name attribute का उपयोग करें कि कौन सा field update करना है, ताकि एक handler हर field के लिए काम करे।
Warning:
Previous state spread करते समय ({...form, [name]: value}), spread भूल जाना हर दूसरे field की value wipe out कर देता है।
उदाहरण: Managing Multiple Fields at Once
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function App() {
const [form, setForm] = React.useState({ first: "", last: "" });
const handleChange = e => setForm({ ...form, [e.target.name]: e.target.value });
return (
<div>
<input name="first" value={form.first} onChange={handleChange} placeholder="First" />
<input name="last" value={form.last} onChange={handleChange} placeholder="Last" />
<p>Full name: {form.first} {form.last}</p>
</div>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
- एक input पर onChange handler भूल जाना, जो इसमें कुछ भी type करना impossible बना देता है।
- Submit handler में event.preventDefault() call न करना, जो page को reload करवाता है।
- Form values को React state से पढ़ने के बजाय DOM से directly पढ़ना।
चैप्टर सारांश
- React में forms regular HTML input elements से बने होते हैं जो React state से enhance किए गए हैं।
- <form> tag पर onSubmit handler वह जगह है जहां आप final values process करते हैं।
- preventDefault() browser के default full-page-reload submit behavior को रोकता है।
- React हर keystroke पर state से input की displayed value re-render करता है।
ब्राउज़र सपोर्ट
कोई React-version restriction नहीं — forms standard HTML elements उपयोग करते हैं जो सभी browsers में supported हैं।
🔒
Chapter Quiz — Complete all 8 topics to unlock
0/8 topics done
Complete these topics first: