React TS - 类型“IntrinsicAttributes & InputProps & RefAttributes<HTMLInputElement>”

Question

如何修复此错误，我正在尝试在 React ts 中创建一个输入组件

export interface InputProps {
    defaultValue?: string;
    disabled?: boolean;
    info?: string | string[];
    name?: string;
    onChange?: (e?: ChangeEvent<HTMLInputElement>) => void;
    placeholder?: string;
    readOnly?: boolean;
    required?: boolean;
    status?: 'error' | 'info' | 'warning';
    type?: string;
}

const Input = forwardRef(
    (
        {
            type = 'text',
            defaultValue = '',
            onChange,
            info,
            status,
            ...restProps
        }: PropsWithoutRef<InputProps>,
        ref?: Ref<HTMLInputElement>,
    ) => {
        const [value, setValue] = useState(defaultValue);

        useEffect(() => {
            setValue(defaultValue);
        }, [defaultValue]);

        return (
            <StyledInputWrapper>
                <StyledInput
                    {...restProps}
                    status={status}
                    ref={ref}
                    value={value}
                    type={type}
                    onChange={(e: ChangeEvent<HTMLInputElement>) => {
                        setValue(e.currentTarget.value);
                        onChange?.(e);
                    }}
                ></StyledInput>
                <StyledInfo>
                    {info &&
                        (Array.isArray(info) ? (
                            info.map((message) => <div>{message}</div>)
                        ) : (
                            <div>{info}</div>
                        ))}
                </StyledInfo>
            </StyledInputWrapper>
        );
    },
);

export const StyledInput = styled.input

这是我的组件使用情况

<Input
                                    placeholder="email"
                                    name="email"
                                    onChange={() => {
                                        setFormError('');
                                        resetError('email');
                                    }}
                                    onBlur={(
                                        e: FocusEvent<HTMLInputElement>,
                                    ) => {
                                        setFieldValue('email', e.target.value);
                                    }}
                                    info={
                                        formErrors.email?.length > 0
                                            ? formErrors.email
                                            : undefined
                                    }
                                />

这是我遇到的 TS 错误

“类型 '{ placeholder: string; name: string; onChange: () => void; onBlur: (e: FocusEvent) => void; info: string[] | undefined; }' 不可分配给类型 'IntrinsicAttributes &InputProps & RefAttributes'。 类型“IntrinsicAttributes & InputProps & RefAttributes”上不存在属性“onBlur”。”

预期：TS 不会显示错误

Answer 1

将

onBlur

属性添加到

InputProps

export interface InputProps {
   onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
   ...
}