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