Multi-Step Forms बनाना
एक multi-step form एक staircase जैसा है — आप एक समय में questions का एक step चढ़ते हैं पूरी flight एक साथ देखने के बजाय।
In this page:
Syntax
const [step, setStep] = useState(0);
const [formData, setFormData] = useState({});
{step === 0 && <StepOne />}
{step === 1 && <StepTwo />}
<button onClick={() => setStep(s => s - 1)}>Back</button>
<button onClick={() => setStep(s => s + 1)}>Next</button>Current Step Track करना
एक multi-step form state का एक piece उपयोग करता है, आमतौर पर एक number, यह track करने के लिए कि currently कौन सा step visible है। इस step number के आधार पर conditional rendering यह decide करती है कि fields का कौन सा set display करना है, जबकि सभी steps same surrounding form share करते हैं।
Note:
Step को एक number (0, 1, 2...) के रूप में store करें एक string name के बजाय, ताकि Next/Back simply 1 जोड़ या घटा सके।
Warning:
Step को component body के अंदर 0 पर reset न करें — यह हर render पर run होगा, सिर्फ button click पर नहीं।
उदाहरण: Tracking the Current Step
<!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 [step, setStep] = React.useState(0);
return (
<div>
{step === 0 && <p>Step 1: Enter your name</p>}
{step === 1 && <p>Step 2: Enter your email</p>}
<button onClick={() => setStep(s => s + 1)}>Next</button>
</div>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>Steps के across Data Share करना
चूंकि हर step अलग fields दिखाता है, form का data step logic के ऊपर एक shared state object में रहना चाहिए, per step reset नहीं।
हर step के inputs इस same shared object से पढ़ते और इसमें लिखते हैं, ताकि forward या back जाते समय कुछ भी न खोए।
Note:
Single-page forms वाला same {...form, [field]: value} update pattern उपयोग करें — multi-step forms सिर्फ staged visibility वाला एक बड़ा form हैं।
Warning:
Per step एक fresh state object बनाना (एक shared object के बजाय) पहले के steps में enter किया गया data फेंक देता है।
उदाहरण: Sharing Data Across Steps
<!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 [step, setStep] = React.useState(0);
const [form, setForm] = React.useState({ name: "", email: "" });
return (
<div>
{step === 0 && <input value={form.name} onChange={e => setForm({...form, name: e.target.value})} placeholder="Name" />}
{step === 1 && <input value={form.email} onChange={e => setForm({...form, email: e.target.value})} placeholder="Email" />}
<button onClick={() => setStep(s => s + 1)}>Next</button>
<p>Saved: {form.name} / {form.email}</p>
</div>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>Back Navigation और Step Boundaries जोड़ना
एक Back button step decrement करता है, लेकिन इसे एक boundary check चाहिए ताकि यह first step से नीचे न जा सके। उसी तरह, last step पर Next button आमतौर पर इसके बजाय एक Submit button बन जाता है।
Note:
Back के लिए Math.max(0, step - 1) उपयोग करें ताकि यह कभी negative न जाए, और अगर आप एक hard upper bound भी चाहें तो Next के लिए Math.min।
Warning:
Clamping के बिना, step 0 पर Back बार-बार click करने से step index negative numbers में जा सकता है, कोई matching content न दिखाते हुए।
उदाहरण: Adding Back Navigation and Step Boundaries
<!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 [step, setStep] = React.useState(0);
const isLast = step === 1;
return (
<div>
<p>Current step: {step + 1} of 2</p>
<button onClick={() => setStep(s => Math.max(0, s - 1))} disabled={step === 0}>Back</button>
<button onClick={() => isLast ? alert("Submitted!") : setStep(s => s + 1)}>{isLast ? "Submit" : "Next"}</button>
</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. #}
आम गलतियां
- Next step पर जाते समय previous step का data खो देना क्योंकि यह shared state में lift नहीं किया गया था।
- Next allow करने से पहले current step validate न करना, users को required fields skip करने देते हुए।
- Step counter को सिर्फ button clicks पर नहीं बल्कि हर re-render पर accidentally reset करना।
चैप्टर सारांश
- एक multi-step form एक लंबे form को अलग pages में तोड़ता है जो state में एक step index द्वारा controlled है।
- सभी field data आमतौर पर हर step के across एक shared state object में store होता है।
- Next/Back buttons pages navigate करने के बजाय step index increment या decrement करते हैं।
- आगे बढ़ने देने से पहले हर step validate करना bad data को later steps तक पहुंचने से रोकता है।
ब्राउज़र सपोर्ट
कोई React-version restriction नहीं — पूरी तरह useState और conditional rendering से बना है।
🔒
Chapter Quiz — Complete all 8 topics to unlock
0/8 topics done
Complete these topics first: