如何在Next.js 13+TypeScript中用react-hook-form构建通用表单组件

需求说明 #

开发基于Next.js 13与TypeScript的应用，需要借助react-hook-form实现一个通用表单组件，用于处理报告、客户、用户等不同类型的表单——各表单字段不同，但保存、重置、更新、删除等操作逻辑一致。

现有尝试代码 #

import { FC } from 'react';
import { useForm, SubmitHandler } from 'react-hook-form';

// 定义不同类型的表单数据
type ReportFormData = {
  reportField: string;
};

type ClientFormData = {
  clientField: string;
};

type UserFormData = {
  userField: string;
};

// 定义通用表单组件的Props
type FormProps<T> = {
  initialData: T;
  onSubmit: SubmitHandler<T>;
};

// 创建通用表单组件
const GenericForm: FC<FormProps> = ({ initialData, onSubmit }) => {
  const { register, handleSubmit, reset } = useForm({
    defaultValues: initialData,
  });

  const onSubmitHandler: SubmitHandler<T> = (data) => {
    onSubmit(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmitHandler)}>
      {/* 如何根据数据类型条件渲染字段？ */}
      {/* 如何在这种场景下妥善处理类型检查？ */}
      
      {/* 保存操作占位符 */}
      <button type="submit">Save</button>
      
      {/* 重置操作占位符 */}
      <button type="button" onClick={() => reset(initialData)}>
        Reset
      </button>
      
      {/* 更新操作占位符 */}
      {/* 删除操作占位符 */}
    </form>
  );
};

遇到的问题 #

在GenericForm组件中进行TypeScript类型检查时，react-hook-form要求表单字段类型必须精确，无法直接使用联合类型，但组件需要根据渲染的表单类型接收不同的初始数据。不确定如何在组件中妥善处理类型检查与条件渲染，以适配不同类型的表单数据并维持类型安全。

解决方案 #

1. 修正泛型组件的类型定义 #

原代码中GenericForm: FC<FormProps>的写法错误，因为FormProps是泛型类型，需要明确声明泛型参数。直接使用函数组件声明泛型比FC更清晰，避免类型歧义。

2. 通过字段渲染回调实现类型安全的条件渲染 #

将字段渲染逻辑从通用组件中剥离，通过renderFields回调让父组件负责渲染对应类型的表单字段。这样既保证了TypeScript类型检查的准确性（register的参数只能是当前表单数据类型的键），又让通用组件专注于处理保存、重置等通用逻辑。

3. 完善通用组件实现 #

以下是修改后的完整代码：

import { useForm, SubmitHandler, UseFormRegister } from 'react-hook-form';
import React from 'react';

// 定义不同类型的表单数据
type ReportFormData = {
  reportField: string;
};

type ClientFormData = {
  clientField: string;
};

type UserFormData = {
  userField: string;
};

// 扩展通用表单组件的Props，加入字段渲染回调
type FormProps<T> = {
  initialData: T;
  onSubmit: SubmitHandler<T>;
  // 回调接收react-hook-form的register方法，返回对应字段的JSX
  renderFields: (register: UseFormRegister<T>) => React.ReactNode;
  // 可选：加入更新、删除操作的回调
  onUpdate?: (data: T) => void;
  onDelete?: (id?: string | number) => void;
  // 可选：传入删除操作需要的ID（如果有的话）
  itemId?: string | number;
};

// 实现泛型通用表单组件
const GenericForm = <T extends object>({
  initialData,
  onSubmit,
  renderFields,
  onUpdate,
  onDelete,
  itemId,
}: FormProps<T>) => {
  const { register, handleSubmit, reset } = useForm<T>({
    defaultValues: initialData,
  });

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
      {/* 渲染父组件传入的对应类型字段 */}
      {renderFields(register)}

      {/* 通用操作按钮组 */}
      <div className="flex gap-2">
        <button type="submit" className="px-4 py-2 bg-blue-500 text-white rounded">
          Save
        </button>
        <button
          type="button"
          onClick={() => reset(initialData)}
          className="px-4 py-2 bg-gray-200 rounded"
        >
          Reset
        </button>
        {onUpdate && (
          <button
            type="button"
            onClick={() => onUpdate(initialData)}
            className="px-4 py-2 bg-green-500 text-white rounded"
          >
            Update
          </button>
        )}
        {onDelete && itemId && (
          <button
            type="button"
            onClick={() => onDelete(itemId)}
            className="px-4 py-2 bg-red-500 text-white rounded"
          >
            Delete
          </button>
        )}
      </div>
    </form>
  );
};

// 调用示例：报告表单
const ReportForm = () => {
  const initialReportData: ReportFormData = { reportField: '' };

  const handleReportSubmit: SubmitHandler<ReportFormData> = (data) => {
    console.log('提交报告数据:', data);
    // 这里可以加入实际的保存逻辑
  };

  const handleReportUpdate = (data: ReportFormData) => {
    console.log('更新报告数据:', data);
  };

  return (
    <div className="p-4">
      <h3 className="text-lg font-bold mb-2">报告表单</h3>
      <GenericForm<ReportFormData>
        initialData={initialReportData}
        onSubmit={handleReportSubmit}
        onUpdate={handleReportUpdate}
        itemId="report-123"
        renderFields={(register) => (
          <div className="space-y-2">
            <label className="block">
              报告字段:
              <input
                {...register('reportField', { required: '此字段必填' })}
                className="mt-1 block w-full border rounded px-2 py-1"
              />
            </label>
          </div>
        )}
      />
    </div>
  );
};

// 调用示例：客户表单
const ClientForm = () => {
  const initialClientData: ClientFormData = { clientField: '' };

  const handleClientSubmit: SubmitHandler<ClientFormData> = (data) => {
    console.log('提交客户数据:', data);
  };

  return (
    <div className="p-4">
      <h3 className="text-lg font-bold mb-2">客户表单</h3>
      <GenericForm<ClientFormData>
        initialData={initialClientData}
        onSubmit={handleClientSubmit}
        renderFields={(register) => (
          <div className="space-y-2">
            <label className="block">
              客户字段:
              <input
                {...register('clientField', { required: '此字段必填' })}
                className="mt-1 block w-full border rounded px-2 py-1"
              />
            </label>
          </div>
        )}
      />
    </div>
  );
};

export { ReportForm, ClientForm };

方案优势 #

• 类型安全：泛型参数T确保react-hook-form的register方法只能接收当前表单数据类型的键，避免类型错误。
• 职责分离：通用组件专注于处理保存、重置等通用逻辑，字段渲染逻辑由父组件负责，便于维护和扩展。
• 灵活性：可以根据需求扩展FormProps，加入更新、删除等操作的回调，适配不同业务场景。

内容的提问来源于stack exchange，提问作者Aladdin Mhemed