如何为异步表单提交处理器正确类型化自定义参数（含事件对象）

错误原因分析 #

• 第一个错误是类型混淆：FormEventHandler<HTMLFormElement>是处理函数的类型，不是事件对象的类型，原生表单事件对象的正确类型是FormEvent<HTMLFormElement>。
• 第二个错误是回调参数不匹配：React表单的onSubmit回调只接收原生事件对象这一个参数，你定义的函数要求传入包含三个属性的对象，类型完全不兼容，因此报错。

正确实现方式 #

方法1：闭包传递自定义参数（推荐） #

通过外层函数接收自定义参数，返回一个符合FormEventHandler类型的异步处理函数，既满足React的回调要求，又能拿到自定义参数：

import { FormEventHandler, FormEvent } from 'react';

// 外层函数接收自定义参数，返回标准的表单提交处理函数
const createSubmitHandler = (customStrParam: string, customNumParam: number): FormEventHandler<HTMLFormElement> => {
  return async (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const res = await signIn('credentials', {
      email: userInfo.email,
      password: userInfo.password,
      redirect: false,
    });
    console.log('自定义参数:', customStrParam, customNumParam);
    console.log('res', res);
  };
};

// 使用时传入自定义参数
<form onSubmit={createSubmitHandler('自定义字符串', 123)}></form>

方法2：使用bind绑定参数（适合静态场景） #

如果不想用闭包，可以用bind把自定义参数绑定到处理函数上，注意参数顺序：React会自动把事件对象作为最后一个参数传入：

import { FormEvent } from 'react';

// 定义包含所有参数的处理函数，事件对象放在参数末尾
const onSubmitHandler = async (customStrParam: string, customNumParam: number, event: FormEvent<HTMLFormElement>) => {
  event.preventDefault();
  const res = await signIn('credentials', {
    email: userInfo.email,
    password: userInfo.password,
    redirect: false,
  });
  console.log('自定义参数:', customStrParam, customNumParam);
  console.log('res', res);
};

// 使用bind绑定自定义参数，事件对象由React自动传入
<form onSubmit={onSubmitHandler.bind(null, '自定义字符串', 123)}></form>

额外说明 #

• 闭包方式更灵活，在动态渲染（比如循环生成表单）时，能避免bind可能带来的上下文或重复创建函数的问题。
• 若使用JavaScript而非TypeScript，可直接省略类型注解，逻辑保持一致。

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