React Hook Form中如何处理同名多输入框的接口定义？

首先修正你的类型定义，正确的TypeScript接口写法应该是：

interface TestForm {
  test: string[];
}

接下来是完整的实现代码，通过React Hook Form的register方法直接绑定数组字段，就能自动收集多个输入框的值到数组中：

import { useForm } from "react-hook-form";

interface TestForm {
  test: string[];
}

export default function TestFormComponent() {
  // 初始化表单，指定泛型并设置默认值
  const { register, handleSubmit } = useForm<TestForm>({
    defaultValues: {
      test: ["", "", ""]
    }
  });

  // 提交时获取完整的数组数据
  const handleFormSubmit = (formData: TestForm) => {
    console.log("收集到的数组数据:", formData.test);
    // 这里可以处理提交逻辑
  };

  return (
    <form onSubmit={handleSubmit(handleFormSubmit)}>
      {/* 使用点语法注册数组元素 */}
      <input {...register("test.0")} />
      <input {...register("test.1")} />
      <input {...register("test.2")} />

      <button type="submit">提交表单</button>
    </form>
  );
}

关键说明 #

• 用useForm<TestForm>指定表单数据的类型，确保TypeScript的类型校验生效
• 注册输入框时使用test.索引的格式，React Hook Form会自动将这些输入值聚合到test数组中
• 设置defaultValues初始化数组，避免出现undefined的类型问题
• 提交表单后，formData.test就是包含三个输入框值的字符串数组

内容的提问来源于stack exchange，提问作者Ramy Mohamed