RJSF搭配TypeScript时如何在onSubmit处理函数中访问formData和event

DevOps 小满

2026-9-26

解决方案

确认你使用的是react-jsonschema-form（以下简称rjsf）v5及以上版本，按以下步骤实现即可：

第一步：定义表单数据对应的TS类型，你可以根据自己的schema结构自定义字段
第二步：给onSubmit回调添加类型注解，自动推导event参数的TS类型
第三步：直接调用e.preventDefault()方法即可

完整代码示例

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Form, type OnSubmitHandler } from '@rjsf/core';
// 如果你用的是rjsf v4及以下版本，先执行npm i @types/react-jsonschema-form -D安装类型包，再从@types/react-jsonschema-form导入对应类型

// 1. 定义你的表单数据类型，按实际schema调整字段
interface IMyFormData {
  username: string;
  email: string;
  age: number;
}

// 2. 给onSubmit添加类型注解，第二个参数e会自动获得 React.FormEvent<HTMLFormElement> 类型
const onSubmit: OnSubmitHandler<IMyFormData> = ({ formData }, e) => {
  // 可选链是为了兼容少数无event的触发场景，避免运行时报错
  e?.preventDefault();
  console.log('提交的表单数据：', formData);
}

const schema = {
  // 你的schema定义，这里省略示例
  type: 'object',
  properties: {
    username: { type: 'string', title: '用户名' },
    email: { type: 'string', title: '邮箱', format: 'email' },
    age: { type: 'number', title: '年龄' }
  },
  required: ['username', 'email']
}

ReactDOM.createRoot(document.getElementById('app')!).render(
  <Form<IMyFormData>
    schema={schema}
    onSubmit={onSubmit}
  />
);

简化写法（无需导入rjsf专属类型）

如果你不想额外导入rjsf的OnSubmitHandler类型，也可以手动给参数标注类型：

import type { FormEvent } from 'react';

interface IMyFormData {
  // 你的表单字段
}

const onSubmit = ({ formData }: { formData: IMyFormData }, e?: FormEvent<HTMLFormElement>) => {
  e?.preventDefault();
  // 自定义提交逻辑
}