javascript - ¿ 如何从功能组件 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 函数中，当我尝试为用户对象设置值时。

有任何想法吗？

标签： javascriptreactjsforms

Answer 1

您错过了 setState 回调中的返回。

替换这个：

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

经过：

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