reactjs - 如何在反应钩子表单中的输入字段中使用数组状态？

Question

应该添加“addFormData”字段以响应钩子表单，我添加了表单验证并想使用 this(addFormData) 以便我可以更新值并使用 onSubmit 方法发送到“联系人”数组状态。另外，如何在我的反应钩子表单中使用 this(onSubmit) ？我在表单输入中使用了 defaultValue，但仍然没有得到输入，它显示为空！！还可以帮助我以反应钩子形式使用我的 onSubmit 功能。我是新来的反应

这是我的代码

const { register, handleSubmit, formState: { errors } } = useForm();
    const onSubmit = (data) => {
        console.log(data);
}

const [addFormData, setAddFormData] = useState({
        id: "",
        firstname: "",
        lastname: "",
        surname: "",
        mailid: "",
        phonenumber: "",
        company: "",

    });
  const [contacts, setContacts] = useState([
        { id: 1, firstname: "Mike", lastname: "Huston", surname: "MH", mailid: "[e-mail]", company: "Estra Boutique ltd.", value: false },
        { id: 2, firstname: "Richard", lastname: "", surname: "R", mailid: "[e-mail]", company: "Amazonia online", value: false },
        { id: 3, firstname: "James", lastname: "Dustin", surname: "JD", mailid: "[e-mail]", company: "Alibaba Traders .co", value: false },
        { id: 4, firstname: "Amanda", lastname: "Paul", surname: "AP", mailid: "[e-mail]", company: "Estra Boutique ltd.", value: false }
    ]);

   const handleFieldChange = () => {
        if (addFormData.id === "") {
            const newContact = {
                id: contacts.length + 1,
                firstname: addFormData.firstname,
                lastname: addFormData.lastname,
                surname: initialData(),
                mailid: addFormData.mailid,
                company: addFormData.company
            }

            setAddFormData({
                firstname: "",
                lastname: "",
                mailid: "",
                company: "",
            });

            setContacts([...contacts, newContact]);
           
        }
        else {

            const editedContact = {
                id: editContactId,
                firstname: addFormData.firstname,
                lastname: addFormData.lastname,
                surname: initialData(),
                mailid: addFormData.mailid,
                company: addFormData.company,
            };
         

            const newContacts = [...contacts];

            const index = contacts.findIndex((contact) => contact.id === editContactId);

            newContacts[index] = editedContact;
            setContacts(newContacts);
            console.log([newContacts]);
            setEditContactId(null);
        }
    }

  <div className="member-detail-popup">

                        <form onSubmit={handleSubmit(data => onSubmit(data, addFormData))}>
                            <label for="fname">Firstname</label>
                            <input type="text" maxLength="15" name="firstname" defaultValue={addFormData.firstname} {...register('firstname', { required: true })} placeholder="Enter first name" />
                            <p>{errors.firstname?.type === 'required' && "Firstname is required </p>

                            <label for="lname">Lastname</label>
                            <input type="text" maxLength="15" name="lastname" defaultValue={addFormData.lastname} {...register('lastname', { required: true })} placeholder="Enter last name" />
                            <p>{errors.lastname?.type === 'required' && "Lastname is required"}</p>


                            <label for="letters">Mail id</label>
                            <input type="text" maxLength="30" name="mailid" defaultValue={addFormData.mailid} {...register('mailid', { required: true, pattern: /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/ })} placeholder=" Enter mail id" />
                            <p>{errors.mailid?.type === 'required' && "Mail id is required"}</p>
                            <p>{errors.mailid?.type === 'pattern' && "Mail id is not valid"}</p>

                            <label for="phone">Phone Number</label>
                            <input type="text" maxLength="10" name="phonenumber" defaultValue={addFormData.phonenumber} {...register('phonenumber', { required: true })} placeholder="Enter phone number" />
                            <p>{errors.lastname?.type === 'required' && "Phone Number is required"}</p>

                            <label for="company">Company</label>
                            <select name="company" defaultValue={addFormData.company} {...register('company', { required: true })}>
                                <option >Select Field</option>
                                <option>Estra Boutique ltd.</option>
                                <option>Amazonia online</option>
                                <option>Alibaba Traders.co</option>
                                <option>Jennifer Traders ltd</option>
                                <option>Turag teer ltd.</option>
                                <option>Dhaka Textile</option>
                                <option>Estra Builders</option>
                                <option>Chowdhury comp</option>
                            </select>
                            <p>{errors.company?.type === 'required' && "Please select a field"}</p>

                      
                            <div class="click-retrieve">
                                <button type="submit" className="data-saving">Save</button>
        
                            </div>
                        </form>
                    </div>

标签： reactjsuse-statereact-hook-form