reactjs - ReactJS隐藏字段在提交时发送返回空值

Question

我从前端表单向我的后端发送了一个请求，它在提交时给出了一条成功消息，但返回了我所有隐藏字段的空值，请帮我解决这个问题，我不知道如何将隐藏字段发送到后端。请帮我解决这个问题。

我的表单代码

const SinglePet = (props) =>{
const formRef = React.useRef(null);
const [singlepet, setSinglePet] = useState({});
const [error, setError] = useState(false);
const [values, setValues] = useState({
    Name: '',
    Last_Name: '',
    Phone: '',
    Email: '',
    message: '',
    Breed: '',
    DOB: '',
    Color: '',
    RefID: '',
    Gender: '',
    Location: '',
    success: false
});

const {Name, Last_Name, Phone, Email, message, Breed, DOB, Color, RefID, Gender, Location, success} = values

const handleChange = Name => event => {
    setValues({...values, [Name]: event.target.value});
};

    const clickSubmit = (event) =>{
    event.preventDefault();
    setValues({...values,
        Breed: formRef.current.breed_name.value,
        DOB: formRef.current.birth_date.value,
        Color: formRef.current.color.value,
        RefID: formRef.current.pet_id.value,
        Gender: formRef.current.gender.value,
        Location: formRef.current.location.value,
        });
    petInquiry({Name, Last_Name, Phone, Email, message, Breed, DOB, Color, RefID, Gender, Location})
    .then(data =>{
        if(data){
            setValues({...values, success: false})
        } else{
            setValues({...values, Name: '', Last_Name: '', Phone: '', Email: '', message: '', Breed: '', DOB: '', Color: '', RefID: '', Gender: '', Location: '', success: true})
        }
    })
};

const newPostForm = () => (
        <form className="form-contact comment_form" ref={formRef} onSubmit={clickSubmit}>
            <div className="row">
                <input type="hidden" name="breed_name" value={singlepet.pbrd_display_name} />
                <input type="hidden" name="gender" value={singlepet.pet_gender} />
                <input type="hidden" name="pet_id" value={singlepet.pet_id} />
                <input type="hidden" name="color" value={singlepet.pet_color_markings} />
                <input type="hidden" name="birth_date" value={singlepet.plttr_birthdate} />
                <input type="hidden" name="location" value={singlepet.loc_addr_city} />
                <div className="col-sm-6">
                    <div className="form-group">
                        <input className="form-control" onChange={handleChange('Name')} maxLength="20" type="text"
                            placeholder="First Name" value={Name} required/>
                    </div>
                </div>
                <div className="col-sm-6">
                    <div className="form-group">
                        <input className="form-control" onChange={handleChange('Last_Name')} type="text" maxLength="25" placeholder="Last Name" value={Last_Name} required/>
                    </div>
                </div>
                
                <div className="col-sm-6">
                    <div className="form-group">
                        <input className="form-control" onChange={handleChange('Phone')} maxLength="10" type="text"
                            placeholder="Phone Number" value={Phone} required/>
                    </div>
                </div>
                <div className="col-sm-6">
                    <div className="form-group">
                        <input className="form-control" onChange={handleChange('Email')} type="email" placeholder="Email Address" value={Email} required/>
                    </div>
                </div>
                <div className="col-12">
                    <div className="form-group">
                        <textarea className="form-control w-100" onChange={handleChange('message')} cols="30" rows="9"
                            placeholder="eg: I like this dog and tell me details"></textarea>
                    </div>
                </div>

            </div>
            <div className="form-group text-right">
                {/* <button className="boxed-btn3" type="submit">Submit</button> */}
                <input className="boxed-btn3" type="submit" value="Submit" />
            </div>
        </form>
)

 const newPostForm = () => (
        <form className="form-contact comment_form" ref={formRef} onSubmit={clickSubmit}>
            <div className="row">
                <input type="hidden" name="breed_name" value={singlepet.pbrd_display_name} />
                <input type="hidden" name="gender" value={singlepet.pet_gender} />
                <input type="hidden" name="pet_id" value={singlepet.pet_id} />
                <input type="hidden" name="color" value={singlepet.pet_color_markings} />
                <input type="hidden" name="birth_date" value={singlepet.plttr_birthdate} />
                <input type="hidden" name="location" value={singlepet.loc_addr_city} />
                <div className="col-sm-6">
                    <div className="form-group">
                        <input className="form-control" onChange={handleChange('Name')} maxLength="20" type="text"
                            placeholder="First Name" value={Name} required/>
                    </div>
                </div>
                <div className="col-sm-6">
                    <div className="form-group">
                        <input className="form-control" onChange={handleChange('Last_Name')} type="text" maxLength="25" placeholder="Last Name" value={Last_Name} required/>
                    </div>
                </div>
                
                <div className="col-sm-6">
                    <div className="form-group">
                        <input className="form-control" onChange={handleChange('Phone')} maxLength="10" type="text"
                            placeholder="Phone Number" value={Phone} required/>
                    </div>
                </div>
                <div className="col-sm-6">
                    <div className="form-group">
                        <input className="form-control" onChange={handleChange('Email')} type="email" placeholder="Email Address" value={Email} required/>
                    </div>
                </div>
                <div className="col-12">
                    <div className="form-group">
                        <textarea className="form-control w-100" onChange={handleChange('message')} cols="30" rows="9"
                            placeholder="eg: I like this dog and tell me details"></textarea>
                    </div>
                </div>

            </div>
            <div className="form-group text-right">
                {/* <button className="boxed-btn3" type="submit">Submit</button> */}
                <input className="boxed-btn3" type="submit" value="Submit" />
            </div>
        </form>
)

api

export const petInquiry =  (sendInquiry) =>{
return fetch(`${API}/send_inquiry`, {
    method: "POST",
    headers:{
        Accept: 'application/json',
        "Content-Type": "application/json",
    },
    body: JSON.stringify(sendInquiry)
})
.then(response => {
    return response.json()
})
.catch(err =>{
    console.log(err)
});

};

请帮忙。提前致谢

标签： reactjslaravel