Question

我正在使用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>

这是我的自定义钩子组件useForm：

import { useState } from 'react';

const useForm = (callback) => {

  const [values, setValues] = useState({});

  const handleSubmit = (event) => {
    if (event) event.preventDefault();
      callback();


  };

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

  return {
    handleChange,
    handleSubmit,
    values,
  }
};

export default useForm;

现在，我想使用提交表单的数据创建一个对象，以将其与Axios一起发布到服务器上。对象应该是这样的：

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

考虑到我使用自定义的Hook基本上只创建了一个状态“值”，我该如何为每个属性分配相应的值？例如，“ firstName：[event.target.name]”可以工作吗？谢谢你们！

Answer 1

您不仅可以这样做吗？

let data ={
  firstName: values.name,
  lastName: values.lastName,
  email: values.email,
  ... etc
}

值是一个对象，因此要使用其各个值，您只需访问相应的键。 values.your_key。

Answer 2

您的example可以正常工作，您必须注意以下问题：

firstName：您没有使用该名称的表单字段。因为您依赖于表单字段名称和JSON对象之间的映射，所以必须确保每个表单字段名称都与您在JSON对象键中想要的完全相同。
您将收到A component is changing an uncontrolled input of type text to be controlled.错误，因为表单字段值将以undefined作为初始值。两种可能的解决方法，最简单的方法是在每个表单字段上将value属性设置为value={values.name || ''}。

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

2 个答案: