如何从不同组件的react-hook-form中同时获取2个表单的数据

Question

我有 2 个来自不同组件的输入，需要从中获取数据。 此外，地点应该是默认的，在两个组件中都不同（'Place1'，'Place2'）。

结果应该写入对象：

[{name: 'Tom', surname: 'Smith', place: 'Place1'},
{name: 'John', surname: 'Johnes', place: 'Place2'}]

const { register, handleSubmit } = useForm({
    mode: 'onChange',
    defaultValues: {
      name: '',
      surname: '',
      place: '',
    },
  });


 const saveAdress = (data) => {
    console.log(data);
  };
     <form onSubmit={handleSubmit(saveAdress)}>
              <div >
                <GetName1 register={register} />
                <GetName2 register={register} />
              </div>
             <button type="submit">
                  Save
                </button>
            </form>

和组件：

const getName1 = () => {
return (
  <form>
    <input placeholder="name" {...register(0.name'}>
    <input placeholder="surname" {...register(0.surname'}>
  </form>
)
}

const getName2 = () => {
return (
  <form>
    <input placeholder="name" {...register(1.name'}>
    <input placeholder="surname" {...register(1.surname'}>
  </form>
)
}

因此，用户填写任何表单（null，一个或两个），按下按钮，数据应该像对象数组一样保存。

Answer 1

您可以从react-hook-form 使用useFieldArray。

这是官方文档中提到的一个例子。

import React from "react";
import { useForm, useFieldArray } from "react-hook-form";

function App() {
  const { register, control, handleSubmit, reset, trigger, setError } = useForm({
    // defaultValues: {}; you can populate the fields by this attribute 
  });
  const { fields, append } = useFieldArray({
    control,
    name: "test"
  });
  
  return (
    <form onSubmit={handleSubmit(data => console.log(data))}>
      <ul>
        {fields.map((item, index) => (
          <li key={item.id}>
            <input {...register(`test.${index}.firstName`)} />
            <Controller
              render={({ field }) => <input {...field} />}
              name={`test.${index}.lastName`}
              control={control}
            />
            <button type="button" onClick={() => remove(index)}>Delete</button>
          </li>
        ))}
      </ul>
      <button
        type="button"
        onClick={() => append({ firstName: "bill", lastName: "luo" })}
      >
        append
      </button>
      <input type="submit" />
    </form>
  );
}

这是一个有效的codesandbox 链接。

如果可能的话，请分享您的工作示例的代码框链接。我们可以在您当前的示例中实现这一点。