React-Admin 3.x.x迁移至4.7.4后TextInput类型及校验异常问题

一、解决校验仅在提交后触发的问题 #

React Admin 4.x中SimpleForm默认仅在提交时触发校验（validateMode="onSubmit"），要让校验在输入变化或失焦时触发，直接给SimpleForm添加validateMode属性即可：

<SimpleForm
  margin="dense"
  redirect="false"
  save={save}
  toolbar={toolbar}
  variant="filled"
  validateMode="onChange" // 可选值：onChange/onBlur/onSubmit
>
  // ... 表单组件
</SimpleForm>

如果只需针对单个TextInput设置校验时机，也可以通过InputProps传递给底层Material UI组件，但更推荐统一在SimpleForm上配置，保持表单行为一致。

二、解决类型定义错误问题 #

你的类型报错核心是依赖版本不匹配或TypeScript缓存异常，按以下步骤修复：

1. 统一React Admin相关依赖版本 #

不要单独指定ra-ui-materialui版本，它会由react-admin自动关联对应版本，避免版本冲突。修改package.json删除单独的ra-ui-materialui条目，然后执行：

rm -rf node_modules package-lock.json
npm install

2. 修正source属性类型提示问题 #

React Admin 4.x中source是表单组件的必填属性，VS Code提示可选大概率是TypeScript缓存未更新：

• 重启VS Code的TypeScript服务（快捷键Ctrl+Shift+P → 选择「TypeScript: Restart TS Server」）
• 删除项目根目录的.tsbuildinfo缓存文件

3. 解决validate/defaultValue属性不存在的报错 #

React Admin 4.x的TextInput原生支持这两个属性，若仍报错：

• 执行npm list react-admin确认版本确实为4.7.4，若版本不一致，重新安装指定版本：

  npm install react-admin@4.7.4
  

• 若仍有类型提示异常，可显式导入FormInputProps做类型约束（可选）：

  import { FormInputProps } from 'ra-core';
  
  type CustomTextInputProps = FormInputProps & {
    // 你的自定义属性（如果有）
  };
  

修改后的完整示例代码 #

import React, { memo } from 'react'
import {
  SimpleForm,
  TextInput,
  maxLength,
  required,
  useLocale,
} from 'react-admin'

import { CreateEditFormProps } from '../../types'
import { noEmptySpace } from '../uiTools/inputs/customValidators'

const VatRateCreateEditForm = (props: CreateEditFormProps) => {
  const { save, toolbar } = props
  const locale = useLocale()

  return (
    <SimpleForm
      margin="dense"
      redirect="false"
      save={save}
      toolbar={toolbar}
      variant="filled"
      validateMode="onChange"
    >
      <TextInput
        label="resources.vat-rates.fields.vatName"
        source={`name_${locale}`}
        validate={[required(), maxLength(50), noEmptySpace]}
        // defaultValue="默认内容" // 如需默认值可添加
      />
    </SimpleForm>
  )
}

export default memo(VatRateCreateEditForm)

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