我正在制作一个表单，下面是格式。正如你所看到的，我在两种情况下(用于以多级形式存储(，在单击下一个时，我们称之为{onSubmitform}。你可以看到的问题是，在表单中输入数据时，我面临着将数据存储在哪里的问题，即{onChange}。另外~请让我知道这是否是｛onSubmitform｝将数据发送到后端。
import React, { useEffect, useState } from 'react';
const Rider_Signup = ()=>{
const [step, setstep] = useState(1);
const [formdata, setFormData] = useState({zipcode:"", email:"",name:"",location:"", dob:"",phone:"",sex:"", password:"",aadhar:""}); // use to hold input from user
const onSubmitform = async e =>{
e.preventDefault();
try{
const email=formdata.email;
console.log(email);
const body={email};
const response = await fetch("http://localhost:5000/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')
}
}
const renderForm = () =>{
switch(step){
case 1: return <div className="admin_form_div">
<h1 className="form_header">Hey ! </h1>
<center>
<form action="/initial" id="admin_form" name="admin_form">
<label for="Email" className="label">Enter the Email</label><br/>
<input type="email" name="name" className="Email" value={formdata.email} onChange={e =>{console.log(formdata.email)
setFormData(formdata.email=(e.target.value))}} placeholder="email@id.com" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,}$" title="Please enter valid email" required />
<br/>
<br/>
<button onClick = {() => setstep(step+1)}>Submit</button>
</form>
</center>
</div>
case 2: return <div><h1>{formdata.email} </h1><button onClick = {() => setstep(step+1)}>Submit</button></div>
default: return <div> {onSubmitform}</div>
}
}
return (
renderForm()
)
};
export default Rider_Signup;
- 表单数据为
const，不能重新分配 - 表单数据只能通过setFormData挂钩进行更改
- 当仅更改电子邮件时，
...formdata将保存其他字段 - 同样，这也是重复的
onChange={
e => {
console.log(formdata.email)
setFormData({ ...formdata, email: e.target.value })
}
}