Typescript 如何使用TypScript和reacthookform在Next.js 14中创建通用表单组件

你走在正确的道路上.我会扩展你所做的事情，并让GenericForm个人采取一般性的论点.

这样定义组件.

const GenericForm = <T,>({ initialData, onSubmit }:FormProps<T>) => {

那就像这样用<GenericForm<ReportFormData> initialData={{reportField:""}} onSubmit={()=>{}}/>

这应该使GenericForm具有类型安全initialData和onSubmit

以下是TS playground https://tsplay.dev/WG05vw的示例

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

// Define different types of form data
type ReportFormData = {
  reportField: string | null;
};

type ClientFormData = {
  clientField: string | null;
};

type UserFormData = {
  userField: string | null;
};

// Define props for the generic form component 
type FormProps<T extends FieldValues> = {
  initialData: DefaultValues<T>;
  onSubmit: SubmitHandler<T>;
};

// Create the generic form component
const GenericForm =<T extends FieldValues,> ({ initialData, onSubmit }:FormProps<T>) => {
  const { register, handleSubmit, reset } = useForm<T>({
    defaultValues: initialData,
  });

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

  return (
    <form onSubmit={handleSubmit(onSubmitHandler)}>
      {/* How can I conditionally render fields based on the type of data? */}
      {/* How to properly handle type checking in this scenario? */}
      
      {/* Placeholder for save operation */}
      <button type="submit">Save</button>
      
      {/* Placeholder for reset operation */}
      <button type="button" onClick={() => reset(initialData)}>
        Reset
      </button>
      
      {/* Placeholder for update operation */}
      {/* Placeholder for delete operation */}
    </form>
  );
};


const ReportFormComponent = () =>{

  return <GenericForm<ReportFormData> initialData={{reportField:null}} onSubmit={(data)=>console.log(data)}/>
}