如何使用setformdata將數據存儲在form中

Question

我正在制作一個表格，下面是格式。 如您所見，我在兩種情況下（用於以多階段形式存儲），然后單擊第二種形式的下一步，我們稱為 {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;

Answer 1

• formdata 是const並且不能重新分配，
• formdata 只能使用 setFormData 掛鈎更改。
• ...formdata將保存其他字段。
• 而且，這是重復的。

onChange={
    e => {
        console.log(formdata.email)
        setFormData({ ...formdata, email: e.target.value })
    }
}