reactjs - '(e : ChangeEvent) => void' is not assignable to type '((event: ChangeEvent) => void)

Question

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不同的签名是一样的。

Answer 1

React.InputHTMLAttributes<HTMLInputElement>定义 onChange如 (event: ChangeEvent<HTMLInputElement>) => void) ，并且您正在定义 onChange如 ChangeHandler<string> .您在错误消息中看到的类型是 intersection这两种类型中。

您可能想使用 Omit<T, K> 删除重叠的 Prop :

type ReactInput = React.InputHTMLAttributes<HTMLInputElement>;
type InputArgs = InputProps & Omit<ReactInput, keyof InputProps>

export const Input = ({ ...{}, ...rest }: InputArgs) => { ... }