मैं एक टेबल बनाने की कोशिश कर रहा हूं जो एक फॉर्म में प्राप्त एक नया उपयोगकर्ता डेटा प्राप्त करता है। यहाँ मेरा कोड है:

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>
    )
}

मुझे एक त्रुटि मिलती है> अपेक्षित ";" हैंडल चेंजइनपुट फ़ंक्शन के अंदर, जब मैं उपयोगकर्ता ऑब्जेक्ट के लिए मान सेट करने का प्रयास करता हूं।

कोई विचार?

0
Victor Alfonso Pérez Espino 20 जिंदा 2021, 01:44

1 उत्तर

सबसे बढ़िया उत्तर

आप सेटस्टेट कॉलबैक में वापसी को याद करते हैं।

इसे बदलें:

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

द्वारा:

const handleChangeInput = (name,value) => {
        setUser((last) => ({
           
            [name]:value,
        })
        );
    }
3
HichamELBSI 20 जिंदा 2021, 01:53
हाँ, यह काम करता है, धन्यवाद, मैंने यह भी कोशिश की: `सेटयूसर ((अंतिम) => {वापसी {[नाम]: मान, ... अंतिम}}); `
 – 
Victor Alfonso Pérez Espino
20 जिंदा 2021, 01:50