我正在将React-Admin从3.x.x迁移到4.7.4
到目前为止,风格,路线和所有其他组件升级成功。
但是<TextInput/>
即使在遵循升级指南之后也不能按预期工作。
1.验证仅触发错误、helperText和红线在提交<SimpleForm/>
之后
1.属性的类型错误。node_modules/ra-ui-materialui/src/input/TextInput.tsx
中的<TextInput/>
定义:
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'>;
以及node_modules/ra-core/src/form/useInput.ts
中的InputProps
定义:
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[];
};
下面是我的应用程序的许多TextInput之一:
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"
>
<TextInput
label="resources.vat-rates.fields.vatName"
source={`name_${locale}`}
validate={[required(), maxLength(50), noEmptySpace]}
/>
</SimpleForm>
)
}
export default memo(VatRateCreateEditForm)
但是visual studio代码悬停文本显示源代码的错误类型:
(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<...>'.
我尝试了很多方法,但都没有效果:
1.我尝试在我的package.json中导入ra-ui-materialui
,而不是让react-admin
自己导入依赖项。
1.我试图覆盖propTypes
以添加validate
和defaultValue
,但找不到方法。
1.我删除并清理了node_modules
文件夹,并多次使用npm install
。
1条答案
按热度按时间vq8itlhq1#
React-admin现在使用react-hook-form,默认情况下在提交时触发验证,您可以通过在表单组件上设置
mode
属性将验证模式更改为on blur。<SimpleForm mode="onBlur">
更多信息请访问https://react-hook-form.com/api/useform