React表单提交类型错误：event与payload参数类型不兼容

错误原因 #

你用到的<Form>组件应该是react-hook-form提供的，它的onSubmit回调参数不是原生的React.FormEvent，而是一个包含表单数据、可选事件对象的payload结构（类型为{ data: FieldValues; event?: BaseSyntheticEvent; ... }），和你定义的handleOnSubmit参数类型完全不兼容，所以触发了类型错误。

解决方案 #

分两种场景处理：

场景1：继续使用react-hook-form的Form组件

修改handleOnSubmit的参数类型，适配react-hook-form的要求：

import { Form, FormSubmitHandler, FieldValues } from "react-hook-form";

// 调整回调函数的参数类型
const handleOnSubmit: FormSubmitHandler<FieldValues> = (payload) => {
  // 需要阻止默认行为的话，从payload里取event调用preventDefault
  payload.event?.preventDefault();

  // 直接从payload.data获取表单输入值（也可以继续用你自己维护的contact状态，看业务逻辑）
  const { email } = payload.data;
  if (email.trim() === "") {
    setErrorMsg("所有字段为必填项");
    return;
  }

  // 后续的dispatch逻辑保持不变
  if (!dataToEdit) {
    dispatch({
      type: "ADD_CONTACT",
      payload: {
        id: Date.now(),
        ...payload.data,
      },
    });
    setContact({ email: "" });
    setErrorMsg("");
  } else {
    dispatch({
      type: "UPDATE_CONTACT",
      payload: {
        id: dataToEdit.id,
        updates: {
          id: Date.now(),
          ...payload.data,
        },
      },
    });
    toggleModal();
  }
};

场景2：改用原生HTML表单

如果不需要react-hook-form的表单管理能力，直接把<Form>替换成原生<form>标签，你的原有handleOnSubmit代码不需要修改：

<form onSubmit={handleOnSubmit} className="contact-form">
  {errorMsg && <p className="errorMsg">{errorMsg}</p>}
  <InputLabel htmlFor="email">Email</InputLabel>
  <TextField
    className="email"
    name="email"
    value={contact.email}
    type="text"
    onChange={handleOnChange}
  />
  <Button variant="contained" type="submit" className="submit-btn">
    {dataToEdit ? "Update Contact" : "Add Contact"}
  </Button>
</form>

额外提示 #

如果是用react-hook-form，更推荐直接用它提供的表单数据（payload.data）来处理，而不是自己维护contact状态，这样能更好地利用库的表单验证、状态管理等功能。

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