¿ 如何從功能組件 React 中獲取表單值？

Question

我正在嘗試制作一個表格來接收以表格形式獲取的新用戶數據。 這是我的代碼：

import React,{useState}  from 'react'

export default function FormAdd({callbackSubmit,...props}) {

    const [user,setUser] = useState({});

    const handleChangeInput = (name,value) => {
        setUser((last) => {
           
            [name]:value,
        }
        );
    }

    return (
        <form 
        onSubmit={
            (e)=>{
                e.preventDefault();
                callbackSubmit(user)            
            }
        }
        className="formadd-container"
        >
            <input onChange={(e)=>{handleChangeInput(e.target.name,e.target.value)}} name={"firstname"} placeholder="Fist Name" type="text" className="formadd-container__input"/>
            <input onChange={(e)=>{handleChangeInput(e.target.name,e.target.value)}} name={"age"} placeholder="Age" type="text" className="formadd-container__input"/>
            <input onChange={(e)=>{handleChangeInput(e.target.name,e.target.value)}} name={"gender"} placeholder="Gender" type="text" className="formadd-container__input"/>
            <input onChange={(e)=>{handleChangeInput(e.target.name,e.target.value)}} name={"phone"} placeholder="Phone" type="text" className="formadd-container__input"/>
            <input  value="Add" type="submit" className="formadd-container__button"/>
        </form>
    )
}

我得到一個錯誤>預期的“;” 在 handleChangeInput function 中，當我嘗試為用戶 object 設置值時。

有任何想法嗎？

Answer 1

您錯過了 setState 回調中的返回。

替換這個：

const handleChangeInput = (name,value) => {
        setUser((last) => {
           
            [name]:value,
        }
        );
    }

經過：

const handleChangeInput = (name,value) => {
        setUser((last) => ({
           
            [name]:value,
        })
        );
    }