export interface InputProps { type?: string; name?: string; value?: CommonTypeTuple; placeholder?: string; label?: string; error?: string; helpText?: string; block?: boolean; disabled?: boolean; onChange?: ChangeHandler<string>; onBlur?: BlurHandler<string | number>; } export const Input = ({ type = "text", name = "", placeholder, error, block = false, disabled = false, onChange = () => {}, onBlur = () => {}, value, className = "", ...rest }: InputProps & React.InputHTMLAttributes<HTMLInputElement>) => { const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => { onChange(e.target.value, e.target.name); }; const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => { onBlur(e.target.value); }; return ( <StyledWrapper block={block}> <StyledInput name={name} type={type} placeholder={placeholder} error={error} disabled={disabled} onBlur={handleBlur} onChange={handleChange} value={value} className={className} aria-label="tm-input" {...rest} /> </StyledWrapper> ); }; export const StyledInput = styled.input<InputProps>` ... ...
[
onChange
和onBlur
报告错误
(e: ChangeEvent<HTMLInputElement>) => void' is not assignable to type '((event: ChangeEvent<HTMLInputElement>) => void) & ChangeHandler<string>'. Type '(e: React.ChangeEvent<HTMLInputElement>) => void' is not assignable to type 'ChangeHandler<string>'. Types of parameters 'e' and 'value' are incompatible. Type 'string' is not assignable to type 'ChangeEvent<HTMLInputElement>'.ts(2322) index.d.ts(1977, 9): The expected type comes from property 'onChange' which is declared here on type 'IntrinsicAttributes & Pick<Pick<Pick<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "type" | ... 283 more ... | "key"> & { ...; } & InputProps, "type" | ... 288 more ... | "key"> & Partial<...>
我很困惑,因为我清楚地传递了
e.target.value
这是一个字符串,并且所报告的错误假定它期望两个处理程序函数本机onChange
和自定义handleChange
具有不同的签名是相同的。
导出接口InputProps {类型?:字符串;名称?:字符串;值?:CommonTypeTuple;占位符?:字符串;标签?:字符串;错误? helpText ?:字符串;块?:...
[React.InputHTMLAttributes<HTMLInputElement>
将onChange
定义为(event: ChangeEvent<HTMLInputElement>) => void)
,而您将onChange
定义为ChangeHandler<string>
。在错误消息中看到的类型是这两种类型的intersection。