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

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

我想做一个多阶段的反应形式。在此特定代码中，只会询问邮政编码并将在提交表单时提交。但是如何带上其他的forms要求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;

解决方法

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

`