typescript React-Admin TextInput属性的类型错误

cczfrluj  于 2023-02-14  发布在  TypeScript
关注(0)|答案(1)|浏览(172)

我正在将React-Admin3.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

并显示validatedefaultValue属性的错误:

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以添加validatedefaultValue,但找不到方法。
1.我删除并清理了node_modules文件夹,并多次使用npm install

vq8itlhq

vq8itlhq1#

React-admin现在使用react-hook-form,默认情况下在提交时触发验证,您可以通过在表单组件上设置mode属性将验证模式更改为on blur。
<SimpleForm mode="onBlur">
更多信息请访问https://react-hook-form.com/api/useform

相关问题