React-Admin TextInput 属性类型错误答案

【问题标题】：React-Admin TextInput properties have wrong typeReact-Admin TextInput 属性类型错误
【发布时间】：2023-02-10 16:55:00
【问题描述】：

我正在做迁移反应管理员从3.x.x到4.7.4
至此，样式、路由等组件升级成功。

但是 <TextInput/> 即使在遵循升级指南后也无法按预期工作。

证实只触发错误、helperText 和红线后提交<SimpleForm/>

属性类型错误。

<TextInput/>来自node_modules/ra-ui-materialui/src/input/TextInput.tsx的定义：

TextInput.propTypes = {
    className: PropTypes.string,
    label: PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.bool,
        PropTypes.element,
    ]),
    options: PropTypes.object,
    resource: PropTypes.string,
    source: PropTypes.string,
};

TextInput.defaultProps = {
    options: {},
};

export type TextInputProps = CommonInputProps &
    Omit<ResettableTextFieldProps, 'label' | 'helperText'>;

和InputProps来自node_modules/ra-core/src/form/useInput.ts的定义：

export type InputProps<ValueType = any> = Omit<
    UseControllerProps,
    'name' | 'defaultValue' | 'rules'
> &
    Partial<UseControllerReturn> & {
        alwaysOn?: any;
        defaultValue?: any;
        format?: (value: ValueType) => any;
        id?: string;
        isRequired?: boolean;
        label?: string | ReactElement | false;
        helperText?: string | ReactElement | false;
        name?: string;
        onBlur?: (...event: any[]) => void;
        onChange?: (...event: any[]) => void;
        parse?: (value: any) => ValueType;
        type?: string;
        resource?: string;
        source: string;
        validate?: Validator | Validator[];
    };

但是 visual studio code 悬停文本显示错误的源类型：

(property) source?: string | null | undefined

并在validate 和defaultValue 属性上显示错误：

Property 'validate' does not exist on type 'IntrinsicAttributes & Pick<InferProps<{ className: Requireable<string>; label: Requireable<NonNullable<string | boolean | ReactElementLike>>; options: Requireable<...>; resource: Requireable<...>; source: Requireable<...>; }>, "resource" | ... 2 more ... | "source"> & Partial<...> & Partial<...>'.```

我尝试了多种方法但都没有用：

我试图在我的 package.json 中导入 ra-ui-materialui 而不是让 react-admin 导入依赖项本身。
我试图覆盖 propTypes 以添加 validate 和 defaultValue 但找不到方法。
我删除并清理了node_modules 文件夹并多次使用了npm install。

【问题讨论】：

嗨卢卡斯，你能分享触发 TS 警告的代码吗？

标签： typescript react-admin

【解决方案1】：

React-admin 现在使用 react-hook-form，它默认在提交时触发验证。您可以通过在表单组件上设置 mode 属性将验证模式更改为 on blur。

<SimpleForm mode="onBlur">

更多信息请访问https://react-hook-form.com/api/useform

【讨论】：