如何在同一个 React 中使用多个表单？

Question

我想制作一个多阶段的 React 表单。在此特定代码中，只会询问 Zipcode 并将在提交表单时提交。但是怎么带其他表单要求Email，重要的是~我提交Zipcode后想要email的表单，因为email和zipcode会一起发送到后台。

import React, { useEffect, useState } from 'react';
const  Rider_Signup = ()=>{
 const [zipcode,setzipcode]=useState();
 const [email,set_email]=useState();
 const onSubmitform = async e =>{
     e.preventDefault();
     try{
         const body={zipcode,email};
         const response = await fetch("https://taxibackendf.herokuapp.com/api/service/signup",{
             method:"POST",headers:{"Content-Type":"application/json"},
             body:JSON.stringify(body)
         })
         const datainjson = await response.json();
         window.location =`/driver/login`;
     }catch(err){
         console.log('Error')
     }
 }
 return (   
  <div className="admin_form_div">
    

    <form  action="/initial" id="admin_form"  name="admin_form" onSubmit={onSubmitform}
            <input type="text" name="Zipcode" className="input" value={zipcode} 
             onChange={e =>setzipcode(e.target.value)} 
               />  
            <button type="submit" className="confirm_btn" >Confirm</button>
    </form> 
 </div>
 );
  };
   export default Rider_Signup;

Answer 1

const [step, setstep] = useState(1);

const [formdata, setFormData] = useState({zip:"", email:""}); // use to hold input from user 

const renderForm = () =>{
    switch(step){
        case 1: return <div>Form one with email<button onClick = {() => setstep(step+1)}>Submit</button></div>
        case 2: return <div>Form with zip code <button onClick = {() => setstep(step+1)}>Submit</button></div>
        default: return <div>Default case</div>


    }

}
return (

    renderForm()
)

`

如何在同一个 React 中使用多个表单？

How to use multiple forms in same React?

javascript

forms

reactjs

mern