如何修复此错误,我正在尝试在 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
预期:TS 不会显示错误
将
onBlur
属性添加到 InputProps
export interface InputProps {
onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
...
}