React自定义Hook中如何用TypeScript传入任意对象实现通用表单功能

核心改造思路是用泛型替代固定的initObj接口，无需提前约定表单结构，即可支持任意场景的表单类型推导与校验。

改造后完整代码 #

import { useState, useCallback } from 'react';

// 泛型约束：仅要求入参是对象结构，不限制内部字段类型
const useForm = <T extends Record<string, any>>(initialState: T) => {
  const [form, setForm] = useState<T>(initialState);

  // 用useCallback封装避免不必要的组件重渲染
  const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value, type, checked } = e.target;
    setForm((prevForm) => ({
      ...prevForm,
      // 兼容checkbox类组件的取值逻辑，适配更多表单场景
      [name]: type === 'checkbox' ? checked : value
    }));
  }, []);

  // 高阶函数封装提交逻辑，直接返回类型安全的表单数据
  const onSubmit = useCallback((submitCallback: (formData: T) => void) => {
    return (e: React.FormEvent<HTMLFormElement>) => {
      e.preventDefault();
      submitCallback(form);
    };
  }, [form]);

  return { form, handleChange, onSubmit } as const;
};

使用示例 #

// 业务侧自定义当前表单的类型结构
interface OrderForm {
  orderName: string;
  count: number;
  selfPick: boolean;
  address: string;
}

// 组件内调用Hook
const OrderSubmitDemo = () => {
  // 传入对应类型的初始值即可自动推导表单类型
  const { form, handleChange, onSubmit } = useForm<OrderForm>({
    orderName: '',
    count: 1,
    selfPick: false,
    address: ''
  });

  // 提交回调中拿到的formData自动匹配OrderForm类型，有完整的类型提示
  const handleSubmit = (formData: OrderForm) => {
    console.log('提交的订单数据：', formData);
    // 后续接口请求逻辑
  };

  return (
    <form onSubmit={onSubmit(handleSubmit)}>
      <input name="orderName" value={form.orderName} onChange={handleChange} placeholder="商品名称" />
      <input name="count" type="number" value={form.count} onChange={handleChange} placeholder="购买数量" />
      <input name="selfPick" type="checkbox" checked={form.selfPick} onChange={handleChange} /> 到店自提
      <input name="address" value={form.address} onChange={handleChange} placeholder="配送地址" />
      <button type="submit">提交订单</button>
    </form>
  );
};

核心改造说明 #

• 泛型<T extends Record<string, any>>仅约束入参为对象结构，不限制内部字段，可适配所有表单场景
• 扩展了输入框兼容逻辑，支持text、number、checkbox等常用输入类型，不需要业务侧单独处理取值逻辑
• 表单数据全程类型安全，字段名写错、值类型不匹配时TS会自动抛出错误，避免线上类型问题
• onSubmit逻辑封装为高阶函数，业务侧只需关注提交后的业务逻辑，不需要单独处理阻止默认事件、取值等重复操作

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