Question

我正在尝试使用带有 props 的样式组件来创建 Input 组件。当我尝试名为 onChange 的道具时，出现错误 No 重载与此调用匹配。我认为我的类型不正确，但经过数小时的谷歌搜索后，我仍然没有得到答案。我错过了什么？

interface Input {
  onChange?: (x? : string ) => void,
  disabled?: boolean,
  readonly?: boolean,
  width?: CSSUnit,
  heightlightColor?: string,
  bgColor?: string,
  type?: string,
  placeholder?: string,
  isFocus?: boolean,
  fontSize?: CSSUnit,
  highlightColor?: string,
  padding? : CSSUnit,
  height? : CSSUnit
}

const InputWrapperDefault = styled.input<Input>`
  background-color: inherit;
  width: 100%;
  height: 100%;
  outline: none;
  border-width: 0px;
  color: inherit;
  font-size: ${(props) => props.fontSize || '16px' };
  padding: ${(props => props.padding ? props.padding : '16px')};
  box-sizing: border-box;
`

const Input: React.FC<Input> = (props) => {
  const [isFocus, setFocus] = useState(false);
  const {
    highlightColor,
    onChange = ()=>{},
    type = 'text',
    width,
    bgColor,
    ...restProps
  } = props;
  console.log(isFocus);
  return (
        <InputWrapperDefault
          autoCapitalize="sentences"
          autoComplete="on"
          autoCorrect="on"
          dir="auto"
          maxLength={50}
          name='name'
          onChange={(e:ChangeEvent<HTMLInputElement>):void => { onChange(e.target.value)} }
          onClick={()=> setFocus(true)}
          spellCheck="true"
          type={type}
          {...restProps}
        />
  )
}

(JSX attribute) onChange?: (React.ChangeEventHandler<HTMLInputElement> & ((x?: string | undefined) => void)) | undefined

No overload matches this call.
  Overload 1 of 2, '(props: Omit<Omit<Pick<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof InputHTMLAttributes<...>> & { ...; } & Input, never> & Partial<...>, "theme"> & { ...; } & { ...; }): ReactElement<...>', gave the following error.
    Type '(e: ChangeEvent<HTMLInputElement>) => void' is not assignable to type 'ChangeEventHandler<HTMLInputElement> & ((x?: string | undefined) => void)'.
      Type '(e: ChangeEvent<HTMLInputElement>) => void' is not assignable to type '(x?: string | undefined) => void'.
        Types of parameters 'e' and 'x' are incompatible.
          Type 'string | undefined' is not assignable to type 'ChangeEvent<HTMLInputElement>'.
            Type 'undefined' is not assignable to type 'ChangeEvent<HTMLInputElement>'.
  Overload 2 of 2, '(props: StyledComponentPropsWithAs<"input", any, Input, never, "input", "input">): ReactElement<StyledComponentPropsWithAs<"input", any, Input, never, "input", "input">, string | JSXElementConstructor<...>>', gave the following error.
    Type '(e: ChangeEvent<HTMLInputElement>) => void' is not assignable to type 'ChangeEventHandler<HTMLInputElement> & ((x?: string | undefined) => void)'.
      Type '(e: ChangeEvent<HTMLInputElement>) => void' is not assignable to type '(x?: string | undefined) => void'.ts(2769)
index.d.ts(2187, 9): The expected type comes from property 'onChange' which is declared here on type 'IntrinsicAttributes & Omit<Omit<Pick<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof InputHTMLAttributes<...>> & { ...; } & Input, never> & Partial<...>, "theme"> & { ...; } & { ...; }'
index.d.ts(2187, 9): The expected type comes from property 'onChange' which is declared here on type 'IntrinsicAttributes & Omit<Omit<Pick<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof InputHTMLAttributes<...>> & { ...; } & Input, never> & Partial<...>, "theme"> & { ...; } & { ...; }'

更新于 onChange?: (x? : string ) => void,

Answer 1

错误的症结在于：a 也就是说，在您的 Type 'undefined' is not assignable to type 'ChangeEvent<HTMLInputElement>'. 类型中，您指定 Input 的参数可能是 onChange（因为可选的 undefined) 或 ? 而不是 string，但是您随后尝试将处理程序分配给 ChangeEvent<HTMLInputElement>，该处理程序只接受 onChange 而不是任何三种可能。

如果我了解您使用字符串与事件类型以及解包到 ChangeEvent<HTMLInputElement> 所完成的工作，您应该通过将两行 e.target.value 更改为以下内容来获得所需的结果：

onChange

还有这个：

onChange?: (x: string | ChangeEvent<HTMLInputElement>) => void,

这里我已经完全取消了 onChange={(e: string | ChangeEvent<HTMLInputElement>):void => { onChange((typeof e === 'string') ? e : e.target.value)} } 分支，假设不会在没有任何参数的情况下调用该方法。然后我安排处理程序接受一个 undefined，将它原封不动地传递过去。

没有重载匹配此调用与样式组件 (index.d.ts(2187, 9))

1 个答案: