Javascript 使用自定义钩子时获取特定状态值（尝试使用钩子实现表单处理）

我正在使用React钩子而不是类和状态实现一个表单。这是我的表格：

const { values, handleChange, handleSubmit } = useForm();
  const [gender, setGender] = useState("");

   return (
      <>
     <ul className="collapsible">
        <li>
          <div className="collapsible-header">Step 1: Your details</div>
          <div className="collapsible-body">

                  <div>
                     <label>First name</label>
                  <input className="browser-default" type="text" name="name" value={values.name} onChange={handleChange}/>
                  </div>
                  <div><label>Last name</label>
                  <input className="browser-default" type="text" name="lastName" value={values.lastName} onChange={handleChange}/> </div>

                   <div><label>Email</label>
                  <input className="browser-default" type="text" name="email" value={values.email} onChange={handleChange}/>
                </div>

                 <button type="submit" className="browser-default">Next></button>

          </div>

现在，我想用提交表单的数据创建一个对象，以便在服务器上使用Axios发布。对象应如下所示：

let data ={
        firstName: name,
        lastName: lastName,
        email:email,
        number:number,
        gender:gender,
        dob: `${day}-${month}-${year}`,
        comments: comments
      }

考虑到使用自定义钩子，我基本上只创建了一个状态“值”，如何将相应的值分配给每个属性？例如“firstName:[event.target.name]”可以工作吗？

---

谢谢你们

你不能就这么做吗

let数据={
firstName:values.name，
lastName:values.lastName，
电子邮件：values.email，
等
}

值是一个对象，因此要使用其单个值，只需访问相应的键即可<代码>值。您的_键将正常工作，您必须注意以下问题：

firstName：您没有具有该名称的表单字段。因为您依赖于表单字段名和JSON对象之间的映射，所以您必须确保每个表单字段名都是您想要的JSON对象键

您将得到

一个组件正在更改要控制的文本类型的非受控输入。

错误，因为表单字段值将以

未定义的
作为初始值。两种可能的修复方法，最简单的是在每个表单字段上使用类似于
value={values.name | |'''}
的value属性

---

可以，但本例中的关键是我为每个输入标记设置的name属性？或者是value属性？它看起来像是

名称

。但是，您需要使用该物业的原因是什么？submit事件不会有这些值。我只是发送这个对象，并从表单中获取相应的值

let data ={
        firstName: name,
        lastName: lastName,
        email:email,
        number:number,
        gender:gender,
        dob: `${day}-${month}-${year}`,
        comments: comments
      }