Javascript 如何在同一个应用程序中使用多个表单？

我想做一个多阶段的反应形式。在这个特定的代码中，只有Zipcode会被询问并在提交表单时提交。但是，如何将其他要求发送电子邮件的表单，重要的是~我希望在提交Zipcode后发送电子邮件表单，因为电子邮件和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;

import React，{useffect，useState}来自“React”；
const Rider_注册=（）=>{
const[zipcode，setzipcode]=useState（）；
const[email，set_email]=useState（）；
const onSubmitform=async e=>{
e、 预防默认值（）；
试一试{
const body={zipcode，email}；
const response=等待获取（“https://taxibackendf.herokuapp.com/api/service/signup",{
方法：“POST”，标题：{“内容类型”：“应用程序/json”}，
body:JSON.stringify（body）
})
const datainjson=await response.json（）；
window.location=`/driver/login`；
}捕捉（错误）{
console.log（'错误'）
}
}
报税表（
证实
);
};
导出默认附加条款（U）注册；

const[step，setstep]=useState（1）；
const[formdata，setFormData]=useState（{zip:，email:}）；//用于保存用户的输入
常量渲染格式=（）=>{
开关（步骤）{
案例1：使用电子邮件setstep（step+1）}>Submit返回表单1
案例2：邮政编码为setstep（step+1）}>提交的退货单
默认：返回默认情况
}
}
返回(
renderForm（）
)

---

`

需要验证的新手问题~setFormData（formdata.email=（e.target.value））}“必需”/>这是正确的格式吗？setFormData（{…formdata，email:e.target.value}）必需“/>

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()
)